Webpack два приложения в одном комплекте, Angular требует Zone.js

Question

Привет всем Я собираю два угловых приложения в одном комплекте с веб-пакетом. Приложения находятся в папке src.

Вот мой конфиг вебпака

const commonConfig = require('./webpack.common.js');              
const webpack = require('webpack');                               
const webpackMerge = require('webpack-merge');                    
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;                    
const path = require('path');                                     
const nodeModules = path.join(process.cwd(), 'node_modules');        

// Webpack Plugins                                                
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;   
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = webpackMerge(commonConfig, {                  

  devtool: 'cheap-module-source-map',                              

  entry: {                                                     
      polyfills: './src/app-integration/polyfills.ts',              
      main: ['./src/app-integration/main.ts', './src/app-integration/styles/css/app.css'],                                 
      spa_test: './src/spa-test/main.ts'                               
  },                                                              

  output: {                                                         
      path: root('dist'),                                       
      filename: 'js/[name].bundle.js',                     
      chunkFilename: 'js/[id].chunk.js'                                
  },                                                              

  module: {                                                        
    rules: [                                                          
    // Loads external css styles into the DOM                          
    {                                                              
       test: /\.(css|scss)$/,                                       
       use: ['to-string-loader', 'css-loader', 'sass-loader'],  
       include: [root('src/app-integration', 'styles', 'css')]        
    },                                                                  
    {                                                               
       test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,         
       loaders: ['@ngtools/webpack']                                   
    }                                                                   
   ]                                                                    
  },                                                             

  plugins: [

    // Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
    new CommonsChunkPlugin({
      name: "vendor",
      minChunks: function (module) {
        return module.resource && module.resource.startsWith(nodeModules)
      },
      chunks: [
        "main"
      ]
    }),


    new AngularCompilerPlugin({
      "mainPath": "./src/app-integration/main.ts",
      "tsConfigPath": "tsconfig.app.json",
      "skipCodeGeneration": false
    }),

    // Inject script and link tags into html files
    // Reference: https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      template: './src/app-integration/index.html',
      chunksSortMode: function (a, b) {
        var order = ["polyfills", "vendor", "main", "styles"];
        return order.indexOf(a.names[0]) - order.indexOf(b.names[0]);
      }
    }),                                                                      
    new HtmlWebpackPlugin({
      filename : 'spa_test.html',                             
      template: './src/spa-test/index.html'
    })                                                               
   ],                                                                  

  /**                                                                   
   * Dev server configuration                                           
   * Reference: http://webpack.github.io/docs/configuration.html#devserver                
   * Reference: http://webpack.github.io/docs/webpack-dev-server.html  
   */                                                          
   devServer: {
     historyApiFallback: true,
     stats: {
     colors: true,
     hash: true,
     timings: true,
     chunks: false,
     chunkModules: false,
     children: false, // listing all children is very noisy in AOT and hides warnings/errors
     modules: true,
     maxModules: 0,rules: [

     reasons: false,
     warnings: true,
     assets: false, // listing all assets is very noisy when using assets directories
     version: false
   }, // none (or false), errors-only, minimal, normal (or true) and verbose,

   watchOptions: { aggregateTimeout: 300, poll: 1000 },
     open:true,
     overlay: true                                                        
   },                                                                  

  node: {
    global: true,
    crypto: 'empty',
    process: true,
    module: false,
    clearImmediate: false,
    setImmediate: false
  }                                                                 
});                                                                 

// Helper functions                                            
function root(args) {                                              
  args = Array.prototype.slice.call(arguments, 0);               
  return path.join.apply(path, [__dirname].concat(args));             
}

Когда я запускаю команду npm run webpack-dev-server --config webpack.dev.js --inline --progress --profile --port 8000 который строит два приложения и запускает первое (интеграция приложений) на порту 8000, я получаю следующую ошибку Error: In this configuration Angular requires Zone.js в консоли браузера. Эта ошибка появилась после того, как я добавил второе приложение (spa-test) в свой проект.

Я могу добавить больше информации об этой проблеме, если это необходимо.

ОБНОВИТЬ -------------------------

Приложения работают одновременно, и существует файл polyfills, который загружает zone.js для первого приложения. Zone.js никогда не загружается для второго приложения и может быть загружен только один раз.

Это причина ошибки Error: In this configuration Angular requires Zone.js,

Answer 1

Вы должны пропустить зависимость от npm zone.js, Бежать npm install --save zone.js и попробуйте еще раз.

Чтобы дать вам больше понимания: угловые потребности zone.js, Довольно хорошая (довольно старая) статья здесь.