angular 2使用@ ngtools/webpack提前編譯，如何？

我想在webpack中編譯角度模板，但它不能完全工作。angular 2使用@ ngtools/webpack提前編譯，如何？

這是我webpack.config.js

/// <binding ProjectOpened='Watch - Development' /> 
var AotPlugin = require("@ngtools/webpack").AotPlugin; 

var path = require("path"); 
var webpack = require("webpack"); 
var basePath = path.join(__dirname, "wwwroot"); 

module.exports = { 
    context: basePath, 
    entry: { 
     main: ["./app/main.ts"], 
     productModule: "./app/components/product-module", 
     adminModule: "./app/components/admin-module" 
    }, 
    output: { 
     path: path.join(__dirname, "wwwroot/built"), 
     filename: "[name].bundle.js", 
     sourceMapFilename: "[name].bundle.js", 
     publicPath: "built/" 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.html$/, 
       loader: "html-loader", 
       query: { 
        minimize: true, 
        ignoreCustomFragments: [/\{\{.*?}}/], 
        removeAttributeQuotes: false, 
        caseSensitive: true, 
        customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ], 
        customAttrAssign: [ /\)?\]?=/ ] , 
        root: basePath, 
        attrs: false // ['img:src', 'link:href'] 
       } 
      }, 
      { 
       test: /\.ts$/, 
       loader: "@ngtools/webpack" 
      }//, 
      // { test: /\.css$/, loader: "style-loader!css-loader?root=." } 
     ] 
    }, 
    externals: { 
     "jquery": "jQuery" 
    }, 
    devtool: false, 
    plugins: [ 
     new AotPlugin({ 
      tsConfigPath: "./tsconfig.json", 
      basePath: basePath 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      //filename: "[name].c.bundle.js"//, 
      names: ["main"] 
     }) 
     , new webpack.optimize.UglifyJsPlugin({ 
      sourceMap: true, 
      minimize: true, 
      acorn: true, 
      angular: true, 
      beautify: false, 
      compress: { 
       properties: true, 
       sequences: true, 
       dead_code: true, 
       drop_debugger: true, 
       unsafe_comps: true, 
       conditionals: true, 
       comparisons: true, 
       evaluate: true, 
       booleans: true, 
       keep_fargs: false, 
       loops: true, 
       unsafe: true, 
       angular: true, 
       unused: true, 
       cascade: true, 
       hoist_funs: true, 
       join_vars: true, 
       warnings: false 
      }, 
      output: { 
       comments: false 
      } 
     }) 
    ] 

};

和我tsconfig.json：

{ 
    "compileOnSave": true, 
    "compilerOptions": { 
    "target": "es5", 
    "module": "es2015", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": true, 
    "diagnostics": false, 
    "suppressImplicitAnyIndexErrors": true 
    }, 
    "filesGlob": [ 
    "**/*.ts" 
    ], 
    "include": [ "typings" ], 
    "exclude": [ "node_modules" ], 
    "angularCompilerOptions": { 
    "entryModule": "app/module#AppModule" 
    } 
}

當我main.ts進口@角/平臺的瀏覽器，並調用platform.bootstrapModule（的AppModule）;

import 'core-js'; 
import 'zone.js'; 

import { enableProdMode } from "@angular/core"; 
import { platformBrowser } from "@angular/platform-browser"; 
enableProdMode(); 
import { AppModule } from './module'; 
const platform = platformBrowser(); 
platform.bootstrapModule(AppModule);

然後主束的大小約爲680KB，但該網站拋出：

NoProviderError_nativeError: Error: No provider for CompilerFactory! 
    at NoProviderError.BaseError [as constructor] (eval at <anonymous> (http://localhost:59432/built/main.bundle.js:23:4831), <anonymous>:30:27) [<root>] 
    at NoProviderError.AbstractProviderError [as constructor] (eval at <anonymous> (http://localhost:59432/built/main.bundle.js:53:73), <anonymous>:64:16) [<root>] 
    at new NoProviderError (eval at <anonymous> (http://localhost:59432/built/main.bundle.js:53:73), <anonymous>:126:16) [<root>] 
    at ReflectiveInjector_._throwOrNull (eval at <anonymous> (http://localhost:59432/built/main.bundle.js:84:73), <anonymous>:492:19) [<root>] 
    at ReflectiveInjector_._getByKeyDefault (eval at <anonymous> (http://localhost:59432/built/main.bundle.js:84:73), <anonymous>:531:25) [<root>] 
    at ReflectiveInjector_._getByKey (eval at <anonymous> (http://localhost:59432/built/main.bundle.js:84:73), <anonymous>:463:25) [<root>] 
    at ReflectiveInjector_.get (eval at <anonymous> (http://localhost:59432/built/main.bundle.js:84:73), <anonymous>:332:21) [<root>] 
    at PlatformRef_._bootstrapModuleWithZone (eval at <anonymous> (http://localhost:59432/built/main.bundle.js:32:7749), <anonymous>:403:62) [<root>] 
    at PlatformRef_.bootstrapModule (eval at <anonymous> (http://localhost:59432/built/main.bundle.js:32:7749), <anonymous>:391:21) [<root>] 
    at eval (eval at <anonymous> (http://localhost:59432/built/main.bundle.js:74:73), <anonymous>:17:10) [<root>] 
    at Object.<anonymous> (http://localhost:59432/built/main.bundle.js:74:73) [<root>] 
    at n (http://localhost:59432/built/main.bundle.js:1:101) [<root>] 
    at Object.<anonymous> (http://localhost:59432/built/main.bundle.js:119:29) [<root>] 
    at n (http://localhost:59432/built/main.bundle.js:1:101) [<root>]constructResolvingMessage: (keys)injectors: Array[1]keys: Array[1]message: (...)name: (...)stack: (...)__proto__: AbstractProviderError 
ReflectiveInjector_._throwOrNull @ VM1617:492 
ReflectiveInjector_._getByKeyDefault @ VM1617:531 
ReflectiveInjector_._getByKey @ VM1617:463 
ReflectiveInjector_.get @ VM1617:332 
PlatformRef_._bootstrapModuleWithZone @ VM1627:403 
PlatformRef_.bootstrapModule @ VM1627:391 
(anonymous) @ VM1271:17 
(anonymous) @ main.bundle.js:74 
n @ main.bundle.js:1 
(anonymous) @ main.bundle.js:119 
n @ main.bundle.js:1 
(anonymous) @ main.bundle.js:1 
(anonymous) @ main.bundle.js:1

但如果我叫平臺的瀏覽器的動態希望的AotPlugin將替代進口，並呼籲：

import 'core-js'; 
import 'zone.js'; 
import { enableProdMode } from "@angular/core"; 
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; 
enableProdMode(); 
import { AppModule } from './module'; 
const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule);

然後main.bundle.js是1076kB，這清楚地表明平臺瀏覽器動態沒有被平臺瀏覽器取代，並且模板編譯器沒有被rem源自代碼樹。使用的WebPack當

什麼是正確的方式擺脫從包模板編譯器（但不是以採用了棱角分明的打字稿編譯運行的WebPack之前）

我還會列出我的package.json的情況下，幫助：

{ 
    "version": "1.0.0", 
    "name": "asp.net", 
    "private": true, 
    "scripts": { 
    "start": "", 
    "lite": "lite-server", 
    "postinstall": "typings install && gulp restore && gulp build:sass" 
    }, 
    "dependencies": { 
    "@angular/common": "2.4.7", 
    "@angular/core": "2.4.7", 
    "@angular/forms": "2.4.7", 
    "@angular/http": "2.4.7", 
    "@angular/platform-browser": "2.4.7", 
    "@angular/platform-browser-dynamic": "2.4.7", 
    "@angular/router": "3.4.7", 
    "@types/es6-shim": "^0.31.32", 
    "animate.css": "^3.5.2", 
    "aspnet-prerendering": "1.0.7", 
    "bootstrap-sass": "^3.3.7", 
    "concurrently": "^2.0.0", 
    "css-loader": "^0.25.0", 
    "es6-promise": "4.0.5", 
    "es6-shim": "0.35.2", 
    "core-js": "2.4.1", 
    "font-awesome": "4.6.3", 
    "gulp": "^3.9.1", 
    "gulp-clean-css": "2.0.13", 
    "gulp-rename": "1.2.2", 
    "gulp-sass": "2.3.2", 
    "gulp-typescript": "3.1.3", 
    "gulp-webpack": "1.5.0", 
    "jquery": "^2.2.4", 
    "reflect-metadata": "^0.1.3", 
    "rollup": "^0.36.3", 
    "rxjs": "5.1", 
    "style-loader": "^0.13.1", 
    "systemjs": "0.19.27", 
    "typings": "^1.0.4", 
    "webpack": "2.2.1", 
    "zone.js": "0.7.2", 
    "angular-2-local-storage": "1.0.0" 
    }, 
    "devDependencies": { 
    "@ngtools/webpack": "1.2.9", 
    "@angular/compiler": "^2.4.7", 
    "@angular/compiler-cli": "2.4.7", 
    "@types/lodash": "^4.14.52", 
    "gulp": "^3.9.1", 
    "gulp-clean-css": "2.0.13", 
    "gulp-rename": "1.2.2", 
    "gulp-sass": "2.3.2", 
    "gulp-typescript": "3.1.3", 
    "html-loader": "0.4.4", 
    "raw-loader": "0.5.1", 
    "rollup-loader": "0.1.2", 
    "rollup-plugin-babel": "2.7.1", 
    "typescript": "2.1.5" 
    }, 
    "optionalDependencies": { 
    "fsevents": "1.0.15" 
    } 
}

來源

2017-02-14 doker

好吧所以...這是新的一天，有一個新的頭腦，我決定調查這個問題。

我去了./node-modules/@ngtools/webpack/src，我確定了負責替換引導代碼的文件。它在文件loader.js中。

我增加了一些控制檯日誌代碼：

console.log("searching for bootstrapModule.") 
    const bootstraps = allCalls 
     .filter(call => call.expression.kind == ts.SyntaxKind.PropertyAccessExpression) 
     .map(call => call.expression) 
     .filter(access => { 
     return access.name.kind == ts.SyntaxKind.Identifier 
      && access.name.text == 'bootstrapModule'; 
     }); 
    console.log("bootstraps:", bootstraps.length); 

    const calls = bootstraps 
     .reduce((previous, access) => { 
      console.log("previous:", previous); 
      console.log("access:", access); 
      const expressions = refactor.findAstNodes(access, ts.SyntaxKind.CallExpression, true); 
      return previous.concat(expressions); 
    }, []) 
     .filter((call) => { 
      console.log("call:", call); 

     return call.expression.kind == ts.SyntaxKind.Identifier 
      && call.expression.text == 'platformBrowserDynamic'; 
     }); 
    console.log("matching calls:", calls.length);

的「bootstrapModule」部分被發現，但「platformBrowserDynamic」不是。看看代碼解析了什麼，我發現了這個問題。

我基本上是什麼：

const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule);

雖然該插件只能以這種形式來識別代碼：

platformBrowserDynamic().bootstrapModule(AppModule);

來源

2017-02-15 07:45:17 doker

angular 2使用@ ngtools/webpack提前編譯，如何？

回答

相關問題