System.register-设置问题 Angular 快速入门

Question

初始问题

不确定这里是否适合提问，但我在为 Angular 设置快速入门教程时遇到了这个问题。

我正在使用 gulp 进行 tsc、捆绑和托管 (gulp-)web 服务器。

我的 tsc-gulp-gulpfile.js 中的任务看起来像这样：

var gulpTypescript = require('gulp-typescript');
var tscConfig = require('./tsconfig.json');

gulp.task('tsc', function () {
    return gulp.src('src/**/*.ts')
        .pipe(gulpTypescript(tscConfig.compilerOptions))
        .pipe(gulp.dest('/gen'));
});

main.ts 看起来像这样（这是 Angular2 Quickstart 提供的）：

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

此任务生成两个 .js 文件，我将它们与 gulp-bundle-assets 连接到最终的 main.js。此文件位于 build/lib/

我的最终捆绑 main.js 看起来像这样（缩短）：

System.register(['angular2/core'], function(exports_1, context_1) {
    var __moduleName = context_1 && context_1.id;
    ..
}};
System.register(['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
    var __moduleName = context_1 && context_1.id;    
    ..
}};

chrome 控制台给我以下错误：

Error: Multiple anonymous System.register calls in module https://localhost:8000/lib/main.js. If loading a bundle, ensure all the System.register calls are named.

所以实际上我不知道 main.js 有什么问题。也许其他人会这样做？

新题（解决上一题后）

Chrome 中不再显示控制台错误日志 - 很好，但是 Angular 模块仍未加载..

我猜 System.js 加载器和我的捆绑 main.js 文件有问题（实际上不是编译的 main.ts 文件 - 它是捆绑的 main.js + app.component.js 文件 - 重命名可能很好..).

我的 index.html 看起来像这样：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>index.html</title>
    <link rel="stylesheet" href="./lib/main.css">
    <script type="text/javascript" src="lib/vendor.js"></script>

    <script>
        System.config({
            packages: {
                lib: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('lib/main')
                .then(null, console.error.bind(console));
    </script>
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

build/-directory（gulp-webserver 的根目录）的结构如下：

构建/
- 库/
  - 地图/
  - main.css
  - main.js
  - vendor.js // 捆绑 node_module-files
- index.html

当我将 main.js 拆分为 main.js + app.component.js（并修改 index.html 中的引用）时，Angular-模块正在加载很好。

Answer 1

您的问题是在连接级别。事实上，您不能使用 gulp-bundle-assets.

连接您的 JS 文件（从 TypeScript 编译的文件）。

您应该使用 tsc 编译器的 outFile 选项（参见 tscConfig.compilerOptions）。它会将你所有的 TypeScript 文件编译成一个 JS 文件。在这种情况下，模块名称将在注册时显式定义：

System.register('app/component', ['angular2/core'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;
  ..
}};
System.register('app/main', ['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;    
  ..
}};

而不是：

System.register(['angular2/core'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;
  ..
}};
System.register(['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;    
  ..
}};

System.register-设置问题 Angular 快速入门

System.register-Issue setting up Angular Quickstart

typescript

tsc

systemjs

angular

初始问题

新题（解决上一题后）