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

Question

我正在创建一个角2应用程序，可以动态注入到一个运行中的网站。这个应用程序的目的是能够可视化地修改网站内容。

当所讨论的网站也没有使用角2运行时，所有操作都如预期的那样。特别是，当原始网站使用角2和Zone.js时，我的应用程序也尝试加载Zone.js，但它在error: Zone already loaded上崩溃。我使用Webpack作为一个构建系统，我试图通过将构建分为三个部分来解决这个问题：manifest、polyfill和app。清单只包含Webpack清单，多填充包含core-js和zone.js，其余在app中。还有第四个块叫做index。这是一个放置在网站上，它首先检查是否定义了window.Zone。如果是，则只添加manifest和app。否则也是polyfill。

问题是，当未加载polyfill块时，该块中的所有模块都从Webpack中丢失。因此，当代码从需要import或Zone.js (我认为正在发生的情况)的app块到达某个core-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或角，使其不导入zone.js作为依赖项，而是使用已在窗口上注册的依赖项？我希望能够有条件地加载core-js和zone.js，只有当它还没有在网站上加载。

更新

我修改了我的构建(Webpack)，使其只使用一个包。在这个包中，我尝试使用Webpack的动态进口，如下所示：

// 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'));

}

我使用的是类型记录，这需要定义文件。问题是是环境依赖项。，所以当我像这样使用它时，我会得到一个关于缺少定义文件的错误。我该怎么解决这个问题？

Answer 1

如果不想将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.
}

Answer 2

为了在tsc 2.8.1中发挥作用，我必须将已被接受的答案和它的一些评论放在一起，下面是其中的所有内容：

首先，确保tsconfig.app.json具有支持动态加载的模块版本：

"module": "esnext" 

其次，通过注释掉这一行，防止zone.js在polyfills.ts中的自动导入：

// import 'zone.js/dist/zone';  // Included with Angular CLI.

第三，在main.ts中添加以下内容：

// if the zone has already been loaded, go ahead an bootstrap the app
if (window['Zone']) {
    bootstrap();

// otherwise, wait to bootstrap the app until zone.js is imported
} else {
    import('zone.js/dist/zone')
        .then(() => bootstrap());
}

function bootstrap() {
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.log(err));
}

Answer 3

另一种方法是替换polyfills.ts中的以下语句

import 'zone.js/dist/zone';  // Included with Angular CLI.

通过以下方式：

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

注意：您可以在所有导入语句的基础上添加require的声明。这样，它将在整个文件中可用。