javascript - Systemjs 配置在 Angular2 中加载 templateUrl

Question

我在将 systemjs 与 angular2 一起使用时遇到问题。

index.html

System.config({
     packages: {
       'app': {
               format: 'register',
               defaultExtension: 'js'
        },
        'angular2': {
                defaultExtension: 'js'
        },
        'rxjs': {
               defaultExtension: 'js'
        }
    },
    paths: {
        '*': 'dist/*',
        'app/*': 'dist/app/*',
        'angular2/*': 'node_modules/angular2/*',
        'rxjs/*': 'node_modules/rxjs/*'
    }
});

System.import('app/main.js').then(null, console.error.bind(console));    

app.js

import {NavbarComponent} from './components/navbar/navbar';
@Component({
    selector: 'main-app',
    templateUrl: './app/app.html',
    directives: [RouterOutlet, NavbarComponent]
})

这是结构:

运行服务时:

dev: {
        port: 8080,
        host: "127.0.0.1",
        open: '/',
        root: '.',
        file: "index.html",
        wait: 1000
    },

所有 .js 文件均使用路径 http://127.0.0.1:8080/dist/app/.../....js 加载
但 templateUlr 加载路径 http://127.0.0.1:8080/app/.../...js
如何配置以加载 templateUrl 并将路径作为 .js 文件？

Answer 1

我将此作为答案发布，因为作为评论，这个太长了!!!

首先作为你问题的答案——你必须给出 src 文件夹的路径，就像我评论后现在正在工作的那样。 其次，您正在谈论 .map 文件 -

是的，您可以在加载 templateUrl 时配置为自动映射路径，您必须执行一些 gulp 任务，如下所示:

将此代码放入 gulpfile.js

gulp.task('compile-ts', function () {
    var sourceTsFiles = [
        config.allTs,
        config.allcompoTs
    ];

    var tsResult = gulp
        .src(sourceTsFiles)
        .pipe(sourcemaps.init())
        .pipe(tsc(tsProject));

    return tsResult.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.tsOutputPath));
});

以及你的 gulp.config.js 中的这个

module.exports = function() {

    var config = {
        allTs : 'src/*.ts',
        allcompoTs: 'src/**/*.ts',
        tsOutputPath : 'dist/',
        index : 'index.html'
    };
    return config;
};

现在您可以根据您的要求配置 gulp 任务了。 希望对您有帮助!