VS2015 MVC項目與Angular2和Webpack錯誤

Question

我有一個創建VS2015 MVC項目與Angular2和Webpack。 我正在努力完成3件事。

1. 捆綁所有JS成3個文件（app.bundle.js，polyfills.bundle.js，vendor.bundle.js）

2. 着牀從組件templateUrl到應用程序中的所有HTML模板。 bundle.js文件。

3. 縮小js文件會很好。我還沒有得到這一點。

我收到以下錯誤和app.bundle.js和vendor.bundle.js僅1K檔 錯誤

體形：找不到模塊「量角器」。 e2e \ app.e2e-spec.ts 構建：重複標識符'PropertyKey'。 node_modules \ @types \ core-js \ index.d.ts 21
Build：重複標識符'export ='。 node_modules \ @types \核心JS \ index.d.ts 1513

我整個項目是在這裏 https://github.com/cjohnst/Angular2MVC2015

的package.json

{ 
 
    "name": "Angular2MVC2015", 
 
    "version": "0.0.0", 
 
    "license": "MIT", 
 
    "scripts": { 
 
    "start": "tsc && npm install && npm run build && \"dotnet run\" ", 
 
    "startWebpackDevServer": "webpack-dev-server --inline --progress --port 8080", 
 
    "build": "SET NODE_ENV=development && webpack -d --color && dotnet run", 
 
    "buildProduction": "SET NODE_ENV=production && webpack -d --color", 
 
    "lint": "tslint ./Angular2/**/*.ts -t verbose", 
 
    "tsc": "tsc", 
 
    "tsc:w": "tsc -w" 
 
    }, 
 
    "keywords": [], 
 
    "dependencies": { 
 
    "@angular/common": "~2.2.0", 
 
    "@angular/compiler": "~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/router": "~3.2.0", 
 
    "@angular/upgrade": "~2.2.0", 
 
    "angular-in-memory-web-api": "~0.1.15", 
 
    "core-js": "^2.4.1", 
 
    "reflect-metadata": "^0.1.8", 
 
    "rxjs": "5.0.0-beta.12", 
 
    "systemjs": "0.19.39", 
 
    "zone.js": "^0.6.25", 
 
    "bootstrap": "^3.3.7", 
 
    "angular2-toaster": "^1.0.1", 
 
    "jquery": "2.2.4", 
 
    "ng2-slim-loading-bar": "^2.0.4" 
 
    }, 
 
    "devDependencies": { 
 
    "@types/core-js": "^0.9.34", 
 
    "@types/node": "^6.0.45", 
 
    "@types/jasmine": "^2.5.35", 
 
    "angular2-template-loader": "^0.4.0", 
 
    "awesome-typescript-loader": "^2.2.4", 
 
    "css-loader": "^0.23.1", 
 
    "extract-text-webpack-plugin": "^1.0.1", 
 
    "file-loader": "^0.8.5", 
 
    "html-loader": "^0.4.3", 
 
    "html-webpack-plugin": "^2.15.0", 
 
    "jasmine-core": "^2.4.1", 
 
    "karma": "^1.2.0", 
 
    "karma-jasmine": "^1.0.2", 
 
    "karma-phantomjs-launcher": "^1.0.2", 
 
    "karma-sourcemap-loader": "^0.3.7", 
 
    "karma-webpack": "^1.8.0", 
 
    "null-loader": "^0.1.1", 
 
    "phantomjs-prebuilt": "^2.1.7", 
 
    "raw-loader": "^0.5.1", 
 
    "rimraf": "^2.5.2", 
 
    "style-loader": "^0.13.1", 
 
    "typescript": "^2.0.3", 
 
    "webpack": "^1.13.0", 
 
    "webpack-dev-server": "^1.14.1", 
 
    "webpack-merge": "^0.14.0", 
 
    "concurrently": "^3.0.0", 
 
    "lite-server": "^2.2.2", 
 
    "typings": "^1.4.0", 
 
    "tslint": "^3.7.4", 
 
    "lodash": "^4.11.1", 
 
    "ts-loader": "^0.8.1", 
 
    "webpack-stream": "^3.2.0", 
 
    "clean-webpack-plugin": "0.1.10", 
 
    "sass-loader": "^3.1.2", 
 
    "node-sass": "3.8.0" 
 
    } 
 
}

webpack.config。 js

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
 
var webpack = require("webpack"); 
 
var HtmlWebpackPlugin = require("html-webpack-plugin"); 
 
var CleanWebpackPlugin = require('clean-webpack-plugin'); 
 

 
module.exports = { 
 
    entry: { 
 
     "polyfills": "./Angular2/polyfills.browser.ts", 
 
     "vendor": "./Angular2/vendor.browser.ts", 
 
     "app": "./Angular2/main.ts" 
 
    }, 
 
    resolve: { 
 
     extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'] 
 
    }, 
 
    output: { 
 
     path: "./wwwroot", 
 
     filename: "[name].bundle.js" 
 
    }, 
 

 
    module: { 
 
     loaders: [ 
 
      { 
 
       test: /\.ts$/, 
 
       loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
 
      }, 
 
      { 
 
       test: /\.html$/, 
 
       loader: "html" 
 
      }, 
 
      { 
 
       test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/, 
 
       loader: "file?name=assets/[name].[ext]", 
 
      }, 
 

 
      // Load css files which are required in vendor.ts 
 
      { 
 
       test: /\.css$/, 
 
       loader: ExtractTextPlugin.extract('style', 'css') 
 
      } 
 
     ] 
 
    }, 
 
    plugins: [ 
 
     new ExtractTextPlugin("css/[name].bundle.css"), 
 
     new webpack.optimize.CommonsChunkPlugin({ 
 
      name: ["app", "vendor", "polyfills"] 
 
     }), 
 
     new CleanWebpackPlugin(
 
      [ 
 
       "./wwwroot" 
 
      ] 
 
     ), 
 
    
 

 
     new webpack.ProvidePlugin({ 
 
      jQuery: 'jquery', 
 
      $: 'jquery', 
 
      jquery: 'jquery' 
 
     }) 
 
    ], 
 
    devServer: { 
 
     historyApiFallback: true, 
 
     stats: "minimal" 
 
    } 
 
};

tsconfig.json

{ 
 
    "compilerOptions": { 
 
    "target": "es5", 
 
    "module": "commonjs", 
 
    "moduleResolution": "node", 
 
    "sourceMap": true, 
 
    "emitDecoratorMetadata": true, 
 
    "experimentalDecorators": true, 
 
    "removeComments": false, 
 
    "noImplicitAny": true, 
 
    "suppressImplicitAnyIndexErrors": true, 
 
    "typeRoots": [ 
 
     "./node_modules/@types/" 
 
    ] 
 
    }, 
 
    "compileOnSave": true, 
 
    "exclude": [ 
 
    "node_modules/*", 
 
    "**/*-aot.ts" 
 
    ] 
 
}

謝謝您的幫助

Answer 1

我覺得你越來越錯誤Cannot find module 'protractor'因爲你沒有排除您的spec和e2e測試用例文件，同時生成生產版本，所以你需要改變y我們在您的webpack.config.js文件，如下awesome-typescript-loader配置：

loaders: [ 
    { 
    test: /\.ts$/, 
    loaders: ['awesome-typescript-loader', 'angular2-template-loader'], 
    exclude: [/\.(spec|e2e)\.ts$/] 
    } 
] 

而且來縮小JS文件，你可以使用UglifyJsPlugin插件的WebPack如下：

const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); 

plugins: [ 
    new UglifyJsPlugin({ 
    beautify: false, //prod 
    mangle : { 
     screw_ie8: true, 
     keep_fnames: true 
    }, 
    compress: { screw_ie8: true }, 
    comments: false 
    }); 
]