Question

Angular2（2.0.1）＆amp; Webpack 2（2.1.0-beta.21）没有问题，我可以执行nom run build：prod wo任何问题......

当我将Angular2升级到最新版本（2.0.1）时，

npm run build // =＆gt;没有错误

但是，

npm run build：prod // =＆gt;我收到错误

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'`

我的 package.json 中唯一的变化是：

....
"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"

}

web pack.config.common.js

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

web pack.config.prod.js

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，@ angular-compiler和@ angular / compiler-cli （版本2.2.0）和web pack（版本2.1.0-beta.21）引发了问题 ...我还测试了最新版本2.2.1 / 2.1.0.beta.27 ...

在生产脚本中运行

ngc -p tsconfig.aot.json

编译输出 tsconfig.aot.json

中指定的目录中的 .ngFactory

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

与我的项目（/ assets / app / ...）连接相同的目录结构，因此web pack使用的最终路径将是

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

这条路径需要通过webpack加载器（genDir参数）知道...所以在我的 webpack.confid.prod.js 我需要声明它：

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

Angular2（2.2.0）＆amp; Webpack 2（2.1.0-beta.21）编译运行build：prod的问题

1 个答案: