VS2015 Angular2とWebpackのエラーを伴うMVCプロジェクト

Question

Angular2とWebpackのVS2015 MVCプロジェクトで作成しました。 私は3つのことを達成しようとしています。

1. 束3つのファイル（app.bundle.js、polyfills.bundle.js、vendor.bundle.js）

2. 埋め込む成分templateUrlからすべてのHTMLテンプレートに全てのJSアプリに。 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
ビルド：重複した識別子 'export ='。 node_modules \ @types \コア-JS \ index.d.ts 1513

私の完全なプロジェクトはwebpack.configここ 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" 
 
    } 
 
}

です。 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

をありがとう、私はあなたのspecとe2eテストケースを除外していないので、あなたがエラーCannot find module 'protractor'を取得していると思いますあなたがyを変更する必要があるので、プロダクションのためのビルドを生成しています私たちのawesome-typescript-loader以下のようにあなたのwebpack.config.jsファイルの構成：

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

とJSを縮小化するためには、あなたが以下のようにWebPACKのためUglifyJsPluginプラグインを使用できるファイル：私が得るとき

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