[英]Component relative path not working. Angular 2
My configurations are below I wanted to use relative-path for the component. 我的配置在下面我想使用组件的相对路径。 But it's giving me this error: 但它给了我这个错误:
404 GET /js/some.component.html 404 GET /js/some.component.html
I am using SystemJS. 我正在使用SystemJS。
some.component.ts some.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'relative-path',
templateUrl: 'some.component.html',
styleUrls: ['some.component.css'],
})
export class SomeRelativeComponent {
}
app.component.ts app.component.ts
import { Component } from '@angular/core';
import { SomeRelativeComponent } from './some.component';
@Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>
<relative-path></relative-path>
`,
directives: [SomeRelativeComponent]
})
export class AppComponent { }
tsconfig.json tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./js"
}
}
Folder Structure: 文件夹结构:
Clearly there is no some.component.html in the /js directory. 显然, / js目录中没有some.component.html。 But how to save it there, as I add up my components in /app directory? 但是如何将它保存在那里,因为我在/ app目录中添加了我的组件?
In your ts.config.json, you specify the outdir, where the .js are exported. 在ts.config.json中,指定outdir,导出.js。
Either you need to modify your outdir, or you can also use a tool such as Gulp which allows you to manipulate your files as streams. 您需要修改outdir,或者也可以使用Gulp等工具,它允许您将文件作为流操作。 You can then define tasks that allow you to move, concat, minify, etc. your .css / .js files where you want. 然后,您可以定义允许您将.css / .js文件移动,连接,缩小等所需的任务 。
package.json 的package.json
"devDependencies": {
"typescript": "^1.8.10",
"typings": "^1.0.4",
"gulp": "^3.9.1",
"path": "^0.12.7",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-typescript": "^2.13.1",
"gulp-tsc": "^1.1.5",
"run-sequence": "^1.2.2"
}
You need to add gulp dependencies in your package.json, and install it with npm : https://www.npmjs.com/package/gulp 您需要在package.json中添加gulp依赖项,并使用npm安装它: https ://www.npmjs.com/package/gulp
Then in a single gulpfile.cs you have in your project solution, you can defines tasks and even do pre-compilation with watchers, which I find very useful. 然后在项目解决方案中的单个gulpfile.cs中,您可以定义任务,甚至可以使用观察者进行预编译,我觉得这非常有用。
For example, since you use TypeScript, 例如,因为您使用TypeScript,
gulpfile.js gulpfile.js
var destPathComponents = './wwwroot/app/';
var tsProject = ts.createProject('tsconfig.json');
gulp.task('Components_JS', function () {
var tsResult = tsProject.src() // instead of gulp.src(...)
.pipe(ts(tsProject));
return tsResult.js.pipe(gulp.dest(destPathComponents));
});
NB :I'm not really sure about this point, but I remember that using the tsconfig.json with gulp like this you actually use the outDir value of the tsconfig.json file instead of the path you set in the gulpfile.js 注:我真的不知道这一点,但我记得,当使用具有一饮而尽的tsconfig.json这样你实际使用的tsconfig.json文件而不是路径的OUTDIR值您在gulpfile.js设置
I really recommend using Gulp though. 我真的建议使用Gulp。
Here is another example to use gulp with simple CSS : 这是另一个使用gulp和简单CSS的例子:
gulp.task('Components_HTML', function () {
return gulp.src([
'*.html'
], {
cwd: "Sources/**"
})
.pipe(gulp.dest(destPathComponents));
});
Basically, this defines a gulp task nammed "Components_HTML" and will take all HTML files and copy them to the destination path which is './wwwroot/app/' in my case. 基本上,这定义了一个gulp任务nammed“Components_HTML”,并将采取所有HTML文件并将它们复制到目标路径,在我的情况下是'./wwwroot/app/'。 Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.