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 - 這是默認值。