2017 年 2 月 22 日更新
正如托比所提到的，最近的软件包更新似乎有一些重大变化。我不确定哪个软件包导致了这个问题。
下面列出的当前版本可以正常工作。当我更新到最新版本时，我收到与您相同的错误：
"@angular/common": "2.4.7",
"@angular/compiler": "2.4.7",
"@angular/compiler-cli": "2.4.7",
"@angular/core": "2.4.7",
"@angular/forms": "2.4.7",
"@angular/http": "2.4.7",
"@angular/platform-browser": "2.4.7",
"@angular/platform-browser-dynamic": "2.4.7",
"@angular/platform-server": "2.4.7",
"rxjs": "5.1.0",
"zone.js": "0.7.6"
"gulp-typescript": "3.1.4",
"systemjs": "0.20.7",
"typescript": "2.1.6",
通用解决方案
使用 NGC 编译源代码（es5 目标和 es6 模块）。这将在文件夹中创建工厂src，并在文件夹中创建元数据和.d.ts文件dist。
接下来通过在 tsconfig-aot.json 中设置以下选项来创建所需的元数据和 .d.ts 文件：
"compilerOptions": {
"target": "es5",
"module": "es6",
"moduleResolution": "node",
"declaration": true,
...
},
"angularCompilerOptions": {
"genDir": "",
"skipMetadataEmit" : false
}
src使用tsc;重新编译文件夹 使用插件内联 HTML。我用过gulp-inline-ng2-template：
gulp.task('compile:es6', function () {
return gulp.src(['./src/**/*.ts'])
.pipe(inlineNg2Template({ base: '/src' }))
.pipe(tsc({
"target": "es5",
"module": "es6",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"lib": ["es6", "dom"]
}))
将 HTML 文件从src文件夹复制到dist文件夹。这部分是必要的，因为 NGC 是在 HTML 模板内联之前编译的。结果，元数据仍然认为您的组件正在使用 templateURL。希望社区能提供一个好的 inline-html 插件，这样就不再需要这一步了。
使用 rollup 摇动树并创建捆绑包：
gulp.task('rollup:module', function() {
return rollup.rollup({
entry: pkg.main,
onwarn: function (warning) {
// Skip certain warnings
// should intercept ... but doesn't in some rollup versions
if (warning.code === 'THIS_IS_UNDEFINED') { return; }
// intercepts in some rollup versions
if ( warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }
if ( warning.message.indexOf("treating it as an external dependency") > -1 ) { return; }
if (warning.message.indexOf("No name was provided for external module") > -1) { return; }
// console.warn everything else
console.warn(warning.message);
}
}).then( function ( bundle ) {
bundle.write({
dest: `dist/${pkg.name}.bundle.umd.js`,
format: 'umd',
exports: 'named',
moduleName: pkg.name,
globals: {
}
});
bundle.write({
dest: `dist/${pkg.name}.bundle.cjs.js`,
format: 'cjs',
exports: 'named',
moduleName: pkg.name,
globals: {
}
});
bundle.write({
dest: `dist/${pkg.name}.bundle.amd.js`,
format: 'amd',
exports: 'named',
moduleName: pkg.name,
globals: {
}
});
});
});
.pipe(gulp.dest('./dist/src'));
});
当你发布你的包（即到 npm）时，确保你将 js、.d.ts 和 .metadata.js 文件包含在同一个dist\src文件夹中，并确保你的主包条目有一个 index.js 文件观点。
捆绑包允许您的用户使用任何动态模块加载器加载您的包；js、.d.ts. 和 metadata.js 文件是使您的包符合 AOT 所必需的——这意味着其他人可以安装您的库并创建 AOT 静态包。
希望这会有所帮助，干杯！
演示入门应用程序（AOT 捆绑）