angular – 如何仅在需要时加载Zone.js
我正在创建一个可以动态注入正在运行的网站的Angular 2应用程序.这个应用程序的重点是能够直观地修改网站内容.
当有问题的网站也没有使用Angular 2运行时,一切都按预期工作.特别是,当原始网站使用Angular 2和Zone.js时,我的应用程序也尝试加载Zone.js但它在 问题是,当未加载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加载到捆绑包中,只需从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. } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |