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 plugin 作为构建任务来为您导入和内联外部模板.这样，获取模板将不需要额外的 http 请求。

Angular 2个组件相对路径

Angular 2 component relative path

systemjs

angular