Question

我的配置如下所示我想使用组件的相对路径。但它给了我这个错误：

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 目录中添加我的组件时，如何将其保存在那里？

Answer 1

在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/'。希望这会有所帮助。

组件相对路径不起作用。 Angular 2

1 个答案: