VS2015 MVC-Projekt mit Angular2 und Webpack Fehler

Question

Ich habe eine in VS2015 MVC-Projekt mit Angular2 und Webpack erstellt. Ich versuche 3 Dinge zu erreichen.

1. Bundle alle js in 3-Dateien (app.bundle.js, polyfills.bundle.js, vendor.bundle.js)

2. einzubetten alle HTML-Vorlagen aus der Komponente templateUrl in App. package.js-Datei.

3. Es wäre toll, die js-Dateien zu minimieren. Ich bin noch nicht an diesen Punkt gekommen.

ich die Fehler bin immer unten und die app.bundle.js und vendor.bundle.js ist nur 1K-Datei Fehler

Körperbau: Kann nicht Modul ‚Winkelmesser‘ gefunden. e2e \ app.e2e-spec.ts Build: Doppelter Bezeichner 'PropertyKey'. node_modules \ @types \ core-js \ index.d.ts 21
Build: Doppelter Bezeichner 'export ='. node_modules \ @types \ core-js \ index.d.ts 1513

Mein vollständiges Projekt ist hier 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" 
 
    ] 
 
}

Vielen Dank für Ihre Hilfe

Answer 1

Ich denke, Sie werden immer Fehler Cannot find module 'protractor', weil Sie nicht Ihre spec und e2e Testfall ausschließen haben Datei beim Generieren von Build für die Produktion, so dass Sie y ändern müssen unsere awesome-typescript-loader Konfiguration in Ihrer webpack.config.js Datei wie folgt:

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

Und die js zu minify Datei, die Sie wie unten UglifyJsPlugin Plugin für webpack verwenden:

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