组件相对路径不工作。角2

Question

我的配置在下面，我想对组件使用相对路径。但这给了我一个错误：

404 GET /js/ome.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"
  }
}

文件夹结构：

​

​

显然，some.component.html目录中没有/js。但是，当我将组件添加到/app目录中时，如何将其保存在那里呢？

Answer 1

在您的ts.config.json中，您指定了导出.js的outdir。

要么您需要修改您的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和gulp，实际上使用了tsconfig.json文件的outDir值，而不是您在gulpfile.js中设置的路径

不过，我真的建议你用杯酒。

下面是使用简单CSS使用gulp的另一个示例：

gulp.task('Components_HTML', function () {
    return gulp.src([
        '*.html'
    ], {
        cwd: "Sources/**"
    })
        .pipe(gulp.dest(destPathComponents));
});

基本上，这定义了一个名为"Components_HTML“的gulp任务，并将获取所有的HTML文件并将它们复制到目标路径'./wwwroot/app/‘(在我的例子中)。希望这能有所帮助。