Question

初始问题

不确定这是否是正确的问题，但我在设置Angular的快速入门教程时遇到了这个问题。

我正在使用gulp进行tsc，捆绑和托管（gulp-）网络服务器。

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

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控制台给出了以下错误：

错误：模块https://localhost:8000/lib/main.js中的多个匿名System.register调用。如果加载bundle，请确保所有System.register调用都已命名。

所以实际上我不知道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的根目录）结构如下：

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

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

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-Issue设置Angular快速入门

初始问题

新问题（解决上层问题后）

1 个答案: