Angular 2组件相对路径

Question

我的systemjs.config.js文件将“ app”映射到“ dist”文件夹。 因此，如果尝试相对引用我的组件html文件，则会收到以下错误：

无法加载https：// localhost：44337 / dist / appComponent.html

我是否也必须使用gulp将html文件复制到“ dist”文件夹？ 我还有什么其他选择？ 绝对路径工作得很好。

我的system.config.js文件：

(function (global) {
System.config({
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
        // our app is within the app folder
        app: 'dist',
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',

App.component文件：

import {Component, OnInit} from "@angular/core";
import {Router} from "@angular/router";

@Component({
    moduleId: module.id,
    selector: "my-app",
    templateUrl: "appComponent.html"
})

提前致谢！

Answer 1

如果您使用外部模板，和相对路径在templateUrl ，然后是你应该复制的HTML文件，并将它们放在dist文件夹中。

将dev/所有.html文件移动到dist/文件夹的任务

gulp.task('move-html',function(){
    return gulp.src('dev/**/*.html')
               .pipe(gulp.dest('dist/'));
});

您还有其他选择，例如使用内联模板（在组件中编写模板），或者-甚至更好-使用gulp-inline-ng2-template插件作为构建任务为您导入和内联外部模板。 这样，获取模板将不需要额外的http请求。