각도 2 AOT - 아직 작성되지 않은 AppModuleNgFactory 참조

Question

동일한 프로젝트의 다른 모듈 아래 예제 응용 프로그램이있는 모듈에 일련의 구성 요소가 있습니다. 나는 잘 작동하는 기존의 JIT 빌드를 가지고 있으며 AOT 빌드로 전환하려고 노력하고있다. 구체적으로는 /src/index.aot.ts (2,34): Cannot find module './aot/app/examples/app.module.ngfactory'입니다.

로컬 응용 프로그램의 AOT 버전을 로컬 dist 디렉토리에 올바르게 설치하려면 webpack을 AotPlugin으로 설정하려면 어떻게해야합니까? 존재하지 않기 때문에이 파일에서

/src/index.aot.ts

는 AppModuleNgFactory는 확인할 수 없습니다. 현재 어떤 aot 디렉토리에도 아무 것도 생성되지 않으며 그 이유를 모르겠습니다.

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); 

당신은 비 AOT 빌드에 대해 가지고있는 main.ts에서 동일한 부트 스트랩 코드를 떠날 필요가 : AOT 빌드를 생성 할 때

platformBrowserDynamic().bootstrapModule(AppModule) 

각도 AOT 로더가 bootstrapModuleFactory에 코드를 리팩토링합니다. here in the sources을 참조하십시오. 중요한 점은 skipCodeGeneration 옵션이 false이어야한다는 것입니다. 이것이 기본값입니다.