// The browser platform without a compiler
import { platformBrowser } from '@angular/platform-browser';
// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app.module.ngfactory';
// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
Angular2 Official Documentation
我们如何将Webpack和Typescript装载器与Angular2的AOT编译器集成？
似乎可能没有选择这样做，但是我在Stack溢出问题，所以当它可用时，答案可以很容易找到。
更新10/12/16 – 我得到它的工作，看到我的答案在下面。
需要几个技巧请注意，AOT编译不支持Angular 2组件中的任何require()语句。他们将需要转换为导入语句。
首先，您需要有一个第二个tsconfig.json文件，具有AOT编译的特殊选项。我用.aot.json扩展名指定。
tsconfig.aot.json：
{
"compilerOptions": {
"target": "es5","emitDecoratorMetadata": true,"experimentalDecorators": true,"allowSyntheticDefaultImports": false,"noEmitHelpers": true,"pretty": true,"strictNullChecks": false,"baseUrl": ".","sourceMap": true,"sourceRoot": ".","lib": [
"es6","dom"
],"types": [
"lodash","hammerjs","jasmine","node","selenium-webdriver","source-map","uglify-js","webpack","materialize-css","jquery","kendo-ui"
],"typeRoots": [
"./node_modules/@types"
],"outDir": "./compiled/src"
},"exclude": [
"./node_modules","./**/*.e2e.ts","./**/*.spec.ts",],"awesomeTypescriptLoaderOptions": {
"useWebpackText": true,"forkChecker": true,"useCache": true
},"compileOnSave": false,"buildOnSave": false,"atom": {
"rewriteTsconfig": false
},"angularCompilerOptions": {
"genDir": "./compiled/aot","debug": true
}
}
您还需要精确正确组合Angular2的版本。 @ angular / core @ 2.0.2和@ angular / common @ 2.0.2没有为我工作，我不得不使用2.0.0两者或ngc无法编译AOT文件。以下是我正在成功使用的：
package.json：
"dependencies": {
"@angular/core": "2.0.0","@angular/common": "2.0.0","@angular/compiler": "2.0.0","@angular/compiler-cli": "0.6.2","@angular/forms": "^2.0.1","@angular/http": "2.0.0","@angular/platform-browser": "2.0.0","@angular/platform-browser-dynamic": "2.0.0","@angular/platform-server": "2.0.0","@angular/router": "3.0.0","@angular/tsc-wrapped": "0.3.0"
}
另外，您还需要一些漂亮的webpack加载器，同时还允许webpack查看./src文件夹以及您的AOT编译文件输出的文件夹。 (* .component.ngfactory.ts)
最后一部分是非常重要的！如果你不告诉webpack包含这些文件夹，它将不起作用。在这个例子中，AOT文件被输出到/ aot编译在根文件夹中。
webpack.common.js
loaders: [
{
test: /\.ts$/,include: [helpers.paths.appRoot,helpers.root('./compiled/aot')],exclude: [/\.(spec|e2e)\.ts$/],loaders: [
'@angularclass/hmr-loader','awesome-typescript-loader','angular2-template-loader','angular2-router-loader?loader=system',"angular2-load-children-loader" // this loader replaces loadChildren value to work with AOT/JIT
],},]
的package.json
"scripts": {
"compile:aot": "./node_modules/.bin/ngc -p ./tsconfig.aot.json",}
您还需要使您的Webpack配置读取AOT版本的app.bootstrap.ts – 这与JIT版本不同。我将其与.aot.ts扩展区分开来，以便在生产环境中，webpack使用AOT(app.bootstrap.aot.ts)，但在开发模式下，它使用JIT与webpack-dev-server(app.bootstrap.ts)。
最后，运行npm运行compile：aot FIRST。
一旦您的AOT文件输出到磁盘，您可以使用webpack或webpack-dev-server运行Webpack构建。
有关一个工作示例，请参阅我的repo Angular2 Webpack2 DotNET Starter.它与.NET Core 1.0集成，但对于不使用.NET的用户，您仍然可以看到Webpack 2和Angular 2的配置。
