初始问题
不确定这里是否适合提问，但我在为 Angular 设置快速入门教程时遇到了这个问题。
我正在为 tsc、捆绑和托管 (gulp-)web 服务器使用 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 控制台给我以下错误:
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/-目录(gulp-webserver 的根目录)的结构如下:
- 构建/
- 库/
- map /
- main.css
- main.js
- vendor.js//捆绑的 node_module-files
- index.html
- 库/
当我将 main.js 拆分为 main.js + app.component.js(并修改 index.html 中的引用)时，Angular-Module 加载正常。
最佳答案
您的问题出在串联级别。事实上，您不能使用 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;
..
}};
关于angular - System.register-Issue 设置 Angular Quickstart，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36219403/