3

最初的问题

不确定这是否是正确的问题，但我在为 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 调用。如果加载捆绑包，请确保命名所有 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 的根目录）的结构如下：

  • 建造/
    • 库/
      • 地图/
      • main.css
      • main.js
      • vendor.js // 捆绑的 node_module-files
    • 索引.html

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

4

1 回答 1

1

您的问题是在串联级别。事实上，你不能使用 gulp-bundle-assets 连接你的 JS 文件（那些从 TypeScript 编译的文件）。

您应该使用outFiletsc 编译器的选项（请参阅 参考资料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;    
  ..
}};
于 2016-03-25T12:02:23.987 回答