Webpack 두 개의 응용 프로그램을 하나의 번들로 묶어서 Angular에 Zone.js가 필요합니다.

Question

안녕하세요 여러분 webpack을 사용하여 하나의 번들에 두 개의 각도 응용 프로그램을 구축하고 있습니다. 응용 프로그램은 src 폴더에 있습니다. 나는 두 개의 응용 프로그램을 구축하고 포트 8000에 첫 번째 (응용 프로그램 통합)를 실행 명령 npm run webpack-dev-server --config webpack.dev.js --inline --progress --profile --port 8000을 실행하면 다음

내 웹팩 설정

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));    
} 

, 내가 얻을 브라우저 콘솔에서 다음과 같은 오류 Error: In this configuration Angular requires Zone.js . 이 오류는 내 프로젝트에 두 번째 응용 프로그램 (spa-test)을 추가 한 후에 나타납니다.

필요한 경우이 문제에 대한 추가 정보를 추가 할 수 있습니다.

UPDATE -------------------------

응용 프로그램은 동시에 실행하고로드하는 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. 꽤 좋은 (다소 오래된) 기사 here.