Angular 2 AOT - 引用尚未创建的AppModuleNgFactory

Question

我在同一个项目中的不同模块下的示例应用程序中有一组模块中的组件。我有一个现有的JIT构建工作正常，我试图转换到AOT构建，我遇到问题。具体而言，/src/index.aot.ts (2,34): Cannot find module './aot/app/examples/app.module.ngfactory'。

如何设置webpack AotPlugin正确构建我的应用程序的AOT版本到本地dist目录？

/src/index.aot.ts

在这个文件中，AppModuleNgFactory无法解决，因为它不存在。目前没有任何生成任何目录，我不知道为什么。

import 'core-js/client/shim'; 
import 'zone.js/dist/zone'; 

import '@angular/common'; 
import 'rxjs'; 

import {enableProdMode} from '@angular/core'; 
import {AppModuleNgFactory} from '../aot/app/examples/app.module.ngfactory'; 
import {platformBrowser} from '@angular/platform-browser'; 

enableProdMode(); 
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); 

/tsconfig.json

{ 
    "compilerOptions": { 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "typeRoots": [ 
     "node_modules/@types/" 
    ], 
    "target": "ES5", 
    "types": [ 
     "node", 
     "jasmine", 
     "es6-shim" 
    ] 
    }, 
    "compileOnSave": false, 
    "filesGlob": [ 
    "src/**/*.ts", 
    "src/**/*.tsx", 
    "!node_modules/**" 
    ], 
    "exclude": [ 
    "node_modules", 
    "dist/", 
    "**/*.spec.ts" 
    ], 
    "angularCompilerOptions": { 
    "genDir": "aot/", 
    "skipMetadataEmit": true 
    } 
} 

webpack-dist.conf

...imports  
module.exports = { 
    entry: { 
    app: './src/index.aot.ts' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.json$/, 
     loaders: [ 
      'json-loader' 
     ] 
     }, 
     { 
     test: /\.(ttf|otf|eot|svg|png|jpg|woff(2)?)(\?[a-z0-9]+)?$/, 
     loader: 'file-loader' 
     }, 
     { 
     test: /\.ts$/, 
     exclude: /node_modules/, 
     loader: 'tslint-loader', 
     enforce: 'pre' 
     }, 
     { 
     test: /\.css$/, 
     loaders: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: 'css-loader?minimize!sass-loader!postcss-loader' 
     }) 
     }, 
     { 
     test: /\.scss$/, 
     loaders: ['raw-loader', 'sass-loader'] 
     }, 
     { 
     test: /\.ts$/, 
     exclude: /node_modules/, 
     loaders: [ 
      '@ngtools/webpack' 
     ] 
     }, 
     { 
     test: /\.html$/, 
     loaders: [ 
      'html-loader' 
     ] 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    FailPlugin, 
    new HtmlWebpackPlugin({ 
     template: conf.path.src('index.html') 
    }), 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     conf.paths.src 
    ), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': '"production"' 
    }), 
    new ExtractTextPlugin('index-[contenthash].css'), 
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}), 
    new webpack.LoaderOptionsPlugin({ 
     options: { 
     postcss:() => [autoprefixer], 
     resolve: {}, 
     ts: { 
      configFileName: 'tsconfig.json' 
     }, 
     tslint: { 
      configuration: require('../tslint.json') 
     } 
     } 
    }), 
    new CopyWebpackPlugin([ 
     {from: 'index.html'} 
    ]), 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     'window.jQuery': 'jquery', 
     Tether: 'tether' 
    }), 
    new AotPlugin({ 
     tsConfigPath: './tsconfig.json', 
     entryModule: './src/app/examples/index.ts#AppModule' 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     output: {comments: false}, 
     compress: {unused: true, dead_code: true, warnings: false} // eslint-disable-line camelcase 
    }) 
    ], 
    output: { 
    path: path.join(process.cwd(), conf.paths.dist, 'aot'), 
    filename: '[name]-[hash].js' 
    }, 
    resolve: { 
    extensions: [ 
     '.webpack.js', 
     '.web.js', 
     '.js', 
     '.ts' 
    ] 
    } 
}; 

我缺少什么？为什么我需要引用一个不存在于像index.aot.ts这样的引导文件中的文件？

完整的错误输出：

ERROR in ~/work/project/src/index.aot.ts (2,34): Cannot find module './aot/app/examples/app.module.ngfactory'. 

ERROR in Could not resolve "./src/app/examples/app.module" from "./src/app/examples/app.module". 

ERROR in ./src/index.aot.ts 
Module not found: Error: Can't resolve './aot/app/examples/app.module.ngfactory' in '~/work/project/src' 
@ ./src/index.aot.ts 4:29-79 

编辑：删除platformBrowser（）和生成的导入后，我到这个莫名其妙的错误：

ERROR in ./src/index.ts 
Module not found: Error: Can't resolve './../$$_gendir/src/app/examples/app.module.ts.ngfactory' 

Answer 1

你不需要在main.ts中做下列事情：

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); 

你必须离开相同的引导代码main.ts你有非AOT编译：

platformBrowserDynamic().bootstrapModule(AppModule) 

角AOT装载机将产生AOT编译时代码重构bootstrapModuleFactory。见here in the sources。重要的是skipCodeGeneration选项应该是false - 这是默认值。