Angular2 (2.2.0) & Webpack 2 (2.1.0-beta.21) 컴파일 문제 실행 빌드 : prod

Question

Angular2 (2.0.1) & Webpack 2 (2.1.0-beta.21) NO issue

나는 최신 버전 (2.0.1)에 Angular2 업그레이드

NPM 실행 빌드 // => 오류

... 문제 하시다 자극하지만,

: NOM 실행 빌드를 수행하지

npm 실행 빌드 : prod // => 오류가 발생합니다.

내 package.json에서

Failed to exec build:prod script.. 
.... `del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p 
tsconfig.aot.json && webpack --config webpack.config.prod.js --progress 
--profile --bail && del-cli 'public/js/app/**/*.js' 
'public/js/app/**/*.js.map' '!public/js/app/bundle.js' 
'!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 
'assets/app/**/*.shim.ts'` 

유일한 변경 사항은 다음과 같습니다

.... 
"dependencies": { 
"@angular/common": "2.2.0", 
"@angular/compiler": "2.2.0", 
"@angular/compiler-cli": "2.2.0", 
"@angular/core": "2.2.0", 
"@angular/forms": "2.2.0", 
"@angular/http": "2.2.0", 
"@angular/platform-browser": "2.2.0", 
"@angular/platform-browser-dynamic": "2.2.0", 
"@angular/platform-server": "2.2.0", 
"@angular/router": "3.2.0", 
"@angular/upgrade": "2.2.0", 
.... 

# not changed 

"devDependencies": { 
"@types/core-js": "^0.9.34", 
"@types/node": "^6.0.45", 
"angular2-router-loader": "^0.3.2", 
"angular2-template-loader": "^0.5.0", 
"awesome-typescript-loader": "^2.2.4", 
"del-cli": "^0.2.0", 
"html-loader": "^0.4.4", 
"raw-loader": "^0.5.1", 
"typescript": "^2.0.3", 
"webpack": "^2.1.0-beta.21", 
"webpack-merge": "^0.14.1" 

}

웹은

var webpack = require('webpack'); 

module.exports = { 
entry: { 
    'app': './assets/app/main.ts' 
}, 

resolve: { 
    extensions: ['.js', '.ts'] 
}, 

module: { 
    loaders: [ 
     { 
      test: /\.ts$/, 
      loaders: [ 
       'awesome-typescript-loader', 
       'angular2-template-loader', 
       'angular2-router-loader' 
      ] 
     }, 
     { 
      test: /\.html$/, 
      loader: 'html-loader' 
     }, 
     { 
      test: /\.css$/, 
      loader: 'raw-loader' 
     } 
    ] 
}, 

plugins: [ 
    new webpack.ContextReplacementPlugin(
     // The (\\|\/) piece accounts for path separators in *nix and Windows 
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     './src' // location of your src 
    ) 
    ] 
}; 

웹 팩을 pack.config.common.js. config.prod.js

012 3,516,

var webpack = require('webpack'); 
var webpackMerge = require('webpack-merge'); 
var commonConfig = require('./webpack.config.common.js'); 

module.exports = webpackMerge.smart(commonConfig, { 
entry: { 
    'app': './assets/app/main.aot.ts' 
}, 

output: { 
    path: './public/js/app', 
    filename: 'bundle.js', 
    publicPath: '/js/app/', 
    chunkFilename: '[id].[hash].chunk.js' 
}, 

module: { 
    loaders: [ 
     { 
      test: /\.ts$/, 
      loaders: [ 
       'awesome-typescript-loader', 
       'angular2-template-loader', 
       'angular2-router-loader?aot=true&genDir=public/js/app' 
      ] 
     } 
    ] 
}, 

plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: false 
    }) 
    ] 
}); 

tsconfig.aot.json

{ 
"compilerOptions": { 
"target": "es5", 
"module": "es2015", 
"moduleResolution": "node", 
"sourceMap": true, 
"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 
"removeComments": false, 
"noImplicitAny": false, 
"outDir": "./public/js/app" 
}, 
"exclude": [ 
"node_modules", 
"dist", 
"assets/app/polyfills.ts" 
], 

"angularCompilerOptions": { 
"skipMetadataEmit" : true 
} 

}

Answer 1

문제는 각 컴파일러 @, 최신 @angular를 사용하여 제기되었다 각도/컴파일러 CLI (버전 @ 2.2.0) 및 웹 팩 (버전 2.1.0-beta.21) ... 최신 버전 2.2.1/2.1.0.beta.27 ...

로 테스트를 마쳤습니다. 실행 생산 스크립트

, 디렉토리에 .ngFactory이 같은 디렉토리 구조와 연결 tsconfig.aot.json

(outDir: " ./public/js/app" 

에 지정된

ngc -p tsconfig.aot.json 

컴파일 출력 내 프로젝트 (/ assets/app/...)이므로 웹 팩에서 사용할 최종 경로는

./public/js/app/assets/app/.. 

나는 그것을 선언 할 필요가 내 webpack.confid.prod.js에 있도록

이 경로는 ... 웹팩 로더 (genDir 매개 변수)에 의해 알고 있어야합니다 :

module: { 
    loaders: [ 
     { 
      test: /\.ts$/, 
      loaders: [ 
       'awesome-typescript-loader', 
       'angular2-template-loader', 
       'angular2-router-loader?aot=true&genDir=public/js/app/assets/app' 
      ] 
     } 
    ] 
},