Невозможно запустить Angular 6, созданный с помощью Webpack 4 и SplitChunksPlugin

Question

Я пытаюсь перенести приложение Angular 6 для использования Webpack 4 вместо Webpack 3, но при запуске приложения я получаю следующую ошибку:

compiler.js:215 Uncaught Error: Can't resolve all parameters for IntroComponent: (?).

Ошибка выше don 'Это происходит, когда я использую следующую оптимизацию:

optimization = {
  splitChunks: {
    chunks: 'all'
  }
}

Это создает следующие пакеты:

• main.js
• main.js.map
• polyfills.js
• polyfills.js.map
• vendor.js
• vendor.js.map
• vendors ~ main.js
• vendors ~ main.js.map
• vendors ~ polyfills.js
• vendors ~ polyfills.js.map
• vendors ~ vendor.js
• vendors ~ vendor.js.map

Согласно этим записям:

entry: {
  polyfills: helpers.root('/client/src/polyfills.ts'),
  vendor: helpers.root('/client/src/vendor.ts'),
  main: helpers.root('/client/src/main.ts'),
},

Сейчас я пытаюсь сгенерировать только три пакета и заставить приложение работать:

• main.js
• vendor.js
• polyfills.js

Поэтому я изменил оптимизацию следующим образом:

optimization = {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      polyfills: {
        name: 'polyfills',
        test: /polyfills|core-js|zone/,
        chunks: 'all',
        priority: 2,
        enforce: true
      },
      vendor: {
        name: 'vendor',
        test: /node_modules/,
        chunks: 'all',
        priority: 1,
        enforce: true
      }
    }
  },
};

Это успешно генерирует три связки, которые я хочу, бно когда я запускаю приложение, я получаю ошибку, упомянутую ранее:

compiler.js:215 Uncaught Error: Can't resolve all parameters for IntroComponent: (?).

Я сравнил комплекты vendor.js и предыдущих поставщиков ~ main.js, и единственное отличие заключается в следующем:

> /***/ "./node_modules/webpack/buildin/global.js":
> /*!***********************************!*\
>   !*** (webpack)/buildin/global.js ***!
>   \***********************************/
> /*! no static exports found */
> /*! ModuleConcatenation bailout: Module is not an ECMAScript module */
> /***/ (function(module, exports) {
> 
> var g;
> 
> // This works in non-strict mode
> g = (function() {
>   return this;
> })();
> 
> try {
>   // This works if eval is allowed (see CSP)
>   g = g || Function("return this")() || (1, eval)("this");
> } catch (e) {
>   // This works if the window reference is available
>   if (typeof window === "object") g = window;
> }
> 
> // g can still be undefined, but nothing to do about it...
> // We return undefined, instead of nothing here, so it's
> // easier to handle this case. if(!global) { ...}
> 
> module.exports = g;
> 
> 
> /***/ }),
> 

Другие пакеты меньше и выглядят одинаково.Как я могу решить эту проблему?Я получаю много головной боли от этой миграции.

ОБНОВЛЕНИЕ:

Я не мог решить, разделившись на поставщика и полифилы, но я закончил с этой конфигурацией оптимизации:

const optimization = {
splitChunks: {
  cacheGroups: {
    vendor: {
      name: 'vendor',
      test: /\/node_modules\//,
      chunks: 'all',
      priority: 0,
      enforce: true,
    },
  },
},