angular – 如何仅在需要时加载Zone.js

我正在创建一个可以动态注入正在运行的网站的Angular 2应用程序.这个应用程序的重点是能够直观地修改网站内容.

当有问题的网站也没有使用Angular 2运行时,一切都按预期工作.特别是,当原始网站使用Angular 2和Zone.js时,我的应用程序也尝试加载Zone.js但它在error: Zone already loaded崩溃.我是使用Webpack作为构建系统,我尝试通过将构建分为3个部分来解决问题：清单,polyfill和app. Manifest只包含Webpack清单,polyfill包含core-js和zone.js,其余部分在app中.还有第四个名为index的块.这是放入网站的那个,它首先检查是否定义了window.Zone.如果是,则仅添加清单和应用程序.否则也是polyfill.

问题是,当未加载polyfill chunk时,Webpack中缺少该块中的所有模块.因此,当代码从需要core-js或Zone.js的应用程序块中获得一些导入时(我认为这正在发生),我收到此错误：

TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (manifest.js:55)
    at Object.<anonymous> (app.js:15016)
    at __webpack_require__ (manifest.js:55)
    at Object.<anonymous> (app.js:65567)
    at __webpack_require__ (manifest.js:55)
    at Object.<anonymous> (app.js:65163)
    at __webpack_require__ (manifest.js:55)
    at Object.defineProperty.value (app.js:65137)
    at __webpack_require__ (manifest.js:55)
    at webpackJsonpCallback (manifest.js:26)

清单文件中的某个地方：

/******/   // Execute the module function
/******/   modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);

题

如何将Webpack或Angular配置为不将zone.js作为依赖项导入,而是使用已在窗口中注册的那个？我希望能够有条件地加载core-js和zone.js,只要它尚未加载到网站上.

UPDATE

我修改了我的构建(Webpack)只使用一个bundle.在那个包中,我尝试使用Webpack的dynamic imports,如下所示：

// import reflect Metadata shim
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


// Angular and application imports
import { platformbrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { ViewEncapsulation } from '@angular/core';


// load the editor in the next frame
requestAnimationFrame(() => {

    if (window.Zone) {
        bootstrap();
    }
    else {
        import('zone.js/dist/zone') // <-- PROBLEM HERE
            .then(bootstrap);
    }

});


// bootstraps the editor
function bootstrap() {

    // add the root component to the DOM
    const root = document.createElement('efe-root');
    document.body.appendChild(root);

    // bootstrap the Angular app
    platformbrowserDynamic()
        .bootstrapModule(AppModule,{
            defaultEncapsulation: ViewEncapsulation.Native
        })
        .then(() => console.debug('Exponea Free Editor has bootstrapped'));

}

我正在使用Typescript,这需要定义文件.问题是Zone.js is an ambient dependency所以当我像这样使用它时,我得到一个关于缺少定义文件的错误.我该如何解决这个问题？

如果您不想将zone.js加载到捆绑包中,只需从polyfills.ts中删除导入：

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';  <---- remove this line

如果要在运行时检查Zone.js的存在并根据结果确定,请使用以下命令：

declare var System;
if (!window['Zone']) {
    System.import('zone.js/dist/zone');  // Included with Angular CLI.
}

angular – 如何仅在需要时加载Zone.js

相关文章