angular - 如何只在需要时加载 Zone.js

Question

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

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

问题是，当 polyfill block 未加载时，该 block 中的所有模块都会从 Webpack 中丢失。因此，当代码从需要 core-js 或 Zone.js 的 app block 到达某些 import 时(这就是我认为正在发生的事情)，我收到此错误:

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)

list 文件中的某处:

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

问题

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

更新

我修改了我的构建 (Webpack) 以仅使用一个包。在那个包中，我尝试像这样使用 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，所以当我像这样使用它时，会收到有关缺少定义文件的错误。我该如何解决这个问题？

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.
}