[英]Component relative path not working. Angular 2
我的配置在下面我想使用组件的相对路径。 但它给了我这个错误:
404 GET /js/some.component.html
我正在使用SystemJS。
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
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
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./js"
}
}
文件夹结构:
显然, / js目录中没有some.component.html。 但是如何将它保存在那里,因为我在/ app目录中添加了我的组件?
在ts.config.json中,指定outdir,导出.js。
您需要修改outdir,或者也可以使用Gulp等工具,它允许您将文件作为流操作。 然后,您可以定义允许您将.css / .js文件移动,连接,缩小等所需的任务 。
的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"
}
您需要在package.json中添加gulp依赖项,并使用npm安装它: https ://www.npmjs.com/package/gulp
然后在项目解决方案中的单个gulpfile.cs中,您可以定义任务,甚至可以使用观察者进行预编译,我觉得这非常有用。
例如,因为您使用TypeScript,
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));
});
注:我真的不知道这一点,但我记得,当使用具有一饮而尽的tsconfig.json这样你实际使用的tsconfig.json文件而不是路径的OUTDIR值您在gulpfile.js设置
我真的建议使用Gulp。
这是另一个使用gulp和简单CSS的例子:
gulp.task('Components_HTML', function () {
return gulp.src([
'*.html'
], {
cwd: "Sources/**"
})
.pipe(gulp.dest(destPathComponents));
});
基本上,这定义了一个gulp任务nammed“Components_HTML”,并将采取所有HTML文件并将它们复制到目标路径,在我的情况下是'./wwwroot/app/'。 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.