Angular網站上的Webpack錯誤

我對Angular 2網站使用Webpack。當我構建它並將其上傳到我的服務器上時，我會在不同的機器上測試它，並且它沒有任何錯誤。然而，在大多數的我的客戶的計算機上，頁面沒有加載所有和它在控制檯上出現以下錯誤：Angular網站上的Webpack錯誤

polyfills.0538e73….bundle.js:1 Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1)

因爲我沒有上的WebPack的經驗，我不知道其他的什麼文件/代碼是否需要識別錯誤。我花了2天時間在Google上找到類似的東西，但在大多數情況下，作者可能會重現錯誤。我無法在我的任何一臺機器上重現它。但是我已經在我客戶的機器上驗證了它。

這些都是從我的地方，開發機：

節點--version：V7.5.0

NPM --version：4.1.2

我的那些生產服務器上：

節點--version：v6.10.3

NPM --versi於：3.10.10

和tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "allowSyntheticDefaultImports": true, 
    "sourceMap": true, 
    "noEmitHelpers": true, 
    "strictNullChecks": false, 
    "baseUrl": "./src", 
    "paths": { 
    }, 
    "lib": [ 
     "dom", 
     "es6" 
    ], 
    "types": [ 
     "hammerjs", 
     "node", 
     "source-map", 
     "uglify-js", 
     "webpack" 
    ] 
    }, 
    "exclude": [ 
    "node_modules", 
    "dist" 
    ], 
    "awesomeTypescriptLoaderOptions": { 
    "forkChecker": true, 
    "useWebpackText": true 
    }, 
    "compileOnSave": false, 
    "buildOnSave": false, 
    "atom": { "rewriteTsconfig": false } 
}

的webpack.config.ts

// Look in ./config folder for webpack.dev.js 
switch (process.env.NODE_ENV) { 
    case 'prod': 
    case 'production': 
    module.exports = require('./config/webpack.prod')({env: 'production'}); 
    break; 
    case 'dev': 
    case 'development': 
    default: 
    module.exports = require('./config/webpack.dev')({env: 'development'}); 
}

這裏是我的index.html

的 webpack.dev這裏的 webpack.prod

腳本的順序

<script type="text/javascript" src="polyfills.0538e73c900216f4d2d0.bundle.js" defer></script> 
<script type="text/javascript" src="vendor.e1aa59d8e719a224eb3a.bundle.js" defer></script> 
<script type="text/javascript" src="main.c4452dc09fbc13bd7362.bundle.js" defer></script>

來源

2017-05-23 Tasos

要確定錯誤，最好在生產服務器上添加：webpack配置，node -version和npm --version。另外，'tsconfig.json'文件可以很好地識別您的目標（es5，es6等）。 – Supamiu

感謝您提供提示而不是投票:)我已經從我的開發機器中收錄了，我將盡快在生產服務器上檢查它們。 – Tasos

https://github.com/AngularClass/angular-starter/issues/456這可能會幫助你。 – Supamiu

此問題很可能由腳本的加載順序觸發。假設你有一個名爲填充工具，廠商和主要腳本三個大塊，請內置index.html檢查腳本按以下順序加載：

polyfills
廠商
主要是

爲了解決這個問題，看看HtmlWebpackPlugin的配置，通常在config/webpack.common.js如果您的項目是基於angular2-webpack-starter。這是這樣的：

new HtmlWebpackPlugin({ 
    template: 'src/index.html', 
    title: METADATA.title, 
    chunksSortMode: 'dependency', // <-- this is important 
    metadata: METADATA, 
    inject: 'head' 
})

new HtmlWebpackPlugin({ 
    template: 'src/index.html', 
    title: METADATA.title, 
    chunksSortMode: 'dependency', // <-- this is important 
    metadata: METADATA, 
    inject: 'head' 
})

來源

2017-05-23 10:31:17

Angular網站上的Webpack錯誤

回答

相關問題