Question

我的systemjs.config.js文件映射了＆＃34; app＆＃34;到＆＃34; dist＆＃34;夹。因此，如果我尝试相对引用我的组件html文件，我会收到以下错误：

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

我是否必须使用gulp将html文件复制到＆＃34; dist＆＃34;文件夹也是？我还有其他选择吗？绝对路径非常好。

我的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文件夹中。

将.html内的所有dev/个文件移至dist/文件夹的任务

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

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

角度2分量相对路径

1 个答案: