Unchaught TypeError: Impossibile leggere la proprietà 'call' di undefined dopo la ricompilazione del webpack CommonsChunkPlugin

Question

Ho uno strano errore quando provo a richiedere un file html. Il codice in questione è un'app di AngularJs scritta in dattiloscritto e che usa webpack.

app.directive.ts

// require('./app.scss'); 

// import AppController from './app.controller'; 

function AppDirective(): ng.IDirective { 
    return { 
    restrict: 'E', 
    scope: {}, 
    controllerAs: 'vm', 
    // controller: AppController, 
    controller:() => {}, 
    // template: require('./app.html') 
    template: '<div>this is a test</div>' 
    } 
} 

angular 
    .module('myApp') 
    .directive('appDirective', AppDirective); 

app.controller.ts

export default class AppController { 

    public static $inject = ['$scope']; 

    constructor(private $scope) { 

    } 
} 

app.html

<div> 
    THIS IS A TEST, REMAIN CALM 
</div> 

app.scss è vuoto.

Ora, così com'è, i commenti inclusi, questo codice si costruisce senza errori nel webpack e verrà implementato utilizzando il server di sviluppo webpack.

Durante l'utilizzo del server di sviluppo web server, che consente di modificare il codice mentre il server è in esecuzione e ricaricarlo dal vivo, è possibile decommentare qualsiasi/tutte le righe commentate e funzionerà correttamente.

Tuttavia, se spengo il server dev e ricostruire, non riesce dando questo errore:

Uncaught TypeError: Cannot read property 'call' of undefined

Uncaught TypeError: Cannot read property 'call' of undefined__webpack_require__ @ bootstrap 9163605…:50 
webpackJsonp.152 @ app.ts:2__webpack_require__ @ bootstrap 9163605…:50 
webpackJsonp.153 @ main.browser.ts:1__webpack_require__ @ bootstrap 9163605…:50 
webpackJsonp.0 @ main.bundle.js:7__webpack_require__ @ bootstrap 9163605…:50 

webpackJsonpCallback @ bootstrap 9.163.605 ...: 21 (funzione anonima) @ main.bundle.js: 1

non riesce a questa linea nel webpack: file di bootstrap:

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 

si verifica questo errore durante il tentativo di decommentare la riga app.scss, le linee del controller o la riga app.html. Questo accade solo dopo una ricostruzione, con qualsiasi o tutte le righe non commentate.

sto usando webpack per costruire, e commonjs per il caricamento del modulo nel TSconfig, e ho le seguenti caricatori WebPack nel webpack.config per questi tipi di file:

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

     { 
     test: /\.scss$/, 
     loader: 'style-loader!css-loader!sass-loader' 
     }, 

     { 
     test: /\.html$/, 
     loader: 'raw-loader', 
     exclude: [helpers.root('src/index.html')] 
     }, 

ho utilizzato angular js e dattiloscritto per un po ', ma questa è la prima volta che inizio il mio progetto, e sto ancora inciampando nel mio webpack.

Sono molto confuso sul motivo per cui questo codice funzionerà se lo inserisco mentre è in esecuzione, ma poi smetterà di funzionare dopo la ricostruzione. Immagino che abbia qualcosa a che fare con la mia configurazione del webpack, ma non riesco a capirlo e sono rimasto bloccato su questo per un po '. Qualsiasi aiuto sarebbe apprezzato.

UPDATE Ho trovato la causa, ma non una soluzione. Sembra essere causato dalla CommonsChunkPlugin nel mio webpack config:

new webpack.optimize.CommonsChunkPlugin({ 
     name: helpers.reverse(['polyfills', 'vendor', 'main']), 
     // minChunks: Infinity 
    }), 

Se rimuovo il plugin l'errore scompare, ma poi non ho più questo plugin.

UPDATE 2

Cambiare l'inizializzazione plugin per questo risolve il problema:

new webpack.optimize.CommonsChunkPlugin({ 
    names: ['polyfills', 'vendor', 'main'], 
    minChunks: 2 
}), 

Ma io ancora non capisco perché

Answer 1

Registrare l'aggiornamento n. 2 come risposta come da raccomandazione di Zze.

Cambiare l'inizializzazione plugin per questo risolve il problema:

new webpack.optimize.CommonsChunkPlugin({ 
    names: ['polyfills', 'vendor', 'main'], 
    minChunks: 2 
}), 

Ma io ancora non capisco perché

Answer 2

Se avete più file WebPack-compilati caricati sulla stessa pagina, si sovrascriveranno a vicenda. usa l'opzione module.output.library per definire uno 'spazio dei nomi' per la tua app.