Angular 2 Typescript System.Src 转译器与 gulptask 一起使用

Question

我是 typescript 和 Angular2 的新手，但是 ...

我的设置如下：

我有一个 src\app 文件夹，而不是站点根目录的 app 文件夹，然后在我的 gulp 任务中，我像这样编译我的打字稿：

gulp.task('copy:libs', ['clean'], function () {
return gulp.src([
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
        'node_modules/angular2/bundles/angular2-polyfills.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/rxjs/bundles/Rx.js',
        'node_modules/angular2/bundles/angular2.dev.js'
    ])
    .pipe(gulp.dest(destination + '/js'));

});

目的地：

const destination = './UI/assets';

到目前为止还不错，但现在是棘手的部分：

在我的目标 + /app 文件夹中，我得到了已编译的 javascript 文件，但是在我的 index.html 文件中使用它们时：

<script>
    System.config({
        paths: {
            'app/*': '/UI/assets/app/*'
        },
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/main.js')
        .then(null, console.error.bind(console));
</script>

但是系统 src 在我的 app.component 上的 main.js 中得到一个 404，它在 typescript 中是这样注册的：

从 './app.component' 导入 { AppComponent };

如果我在编译后的 app.component.js 文件中更改为 ./app.component.js ，这是可行的，但我该如何以正确的方式解决这个问题！？

我的tsconfig是直接从angular 2入门复制过来的。

我的 systemjs 模块应该如何配置才能工作？现在它没有找到任何 js 文件..

Answer 1

我解决了这个问题。主要是我缺少的baseURL：

<script>
        System.config({
            baseURL : '/node_modules'
        });
        System.defaultJSExtensions = true;

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