我正在创建一个可以动态注入正在运行的网站的 Angular 2 应用程序。这个应用程序的目的是能够直观地修改网站内容。
当有问题的网站没有使用 Angular 2 运行时，一切都按预期工作。特别是，当原始网站使用 Angular 2 和 Zone.js 时，我的应用程序也尝试加载 Zone.js但它在error: Zone already loaded上崩溃了。我正在使用 Webpack 作为构建系统，我试图通过将构建分为 3 个部分来解决问题：manifest、polyfill和app。清单只包含 Webpack 清单，polyfill 包含core-js和zone.js，其余的都在app中。还有第四个块叫做index。这是放置在网站中的那个，它首先检查是否定义了window.Zone。如果是，则仅添加manifest和app。否则也polyfill.
问题是，当polyfill块未加载时，Webpack 中缺少该块中的所有模块。因此，当代码从需要core-js或Zone.js的app块到达一些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)
清单文件中的某个位置：
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
问题
如何将 Webpack 或 Angular 配置为不将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'));
}
我正在使用打字稿，这需要定义文件。问题是Zone.js是一个环境依赖项，因此当我像这样使用它时，我会收到有关缺少定义文件的错误。我该如何解决这个问题？
如果您不想将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.
}
我必须将公认的答案和一些评论放在一起才能使其在 tsc 2.8.1 中工作，所以这里的所有内容合二为一：
首先，确保 tsconfig.app.json 具有支持动态加载的模块版本：
"module": "esnext"
其次，通过注释掉以下行来防止 polyfills.ts 中 zone.js 的自动导入：
// 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));
}
另一种方法是替换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声明。这样，它将在整个文件中可用。
我遇到了同样的情况，并将我的构建系统从commonjs/webpack更改为systemjs构建和运行系统
在 SystemJS 中，您可以加载单个文件并配置获取该文件的位置。
在多种技术、多个团队致力于在单页架构中将代码推送到同一页面的环境中，systemjs 给了我很好的经验。
这是我的解决方案和几个月后这个问题的故事。基本上，很长一段时间以来，我在我的项目中使用了公认的答案的解决方案，并且效果很好。它可以检测是否需要 Zone，并仅在尚未加载时才加载它。
但是，当基础应用程序加载缓慢并且我的应用程序将在底层应用程序之前引导时，就会出现问题。在这种情况下，我的应用程序会认为 Zone 未加载并加载它，只是在它不断加载时与底层应用程序发生冲突。
还有其他问题，与这个问题没有特别关系。例如，我发现 Angular 与原型冲突，很多网站都使用 Prototype！
总而言之，我不得不完全改变我的方法。我将应用程序移动到可以访问父网站但不继承其 CSS 或 JS 范围的iframe。这样，我可以安全地加载我的应用程序Angular及其所有依赖项，而不必担心某些内容可能会破坏底层网站/应用程序。