title: How to only load Zone.js when it is needed
body: <p>I'm creating an Angular 2 application that can be dynamically injected into a running website. The point of this app is to be able to modify the website content visually.</p>
  
  <p>Everything works as expected when the website in question does not also run using Angular 2. In particular, when the original website uses Angular 2 and Zone.js, my application also tries to load Zone.js but it crashes on <a href="https://github.com/angular/zone.js/issues/405" rel="noreferrer"><code>error: Zone already loaded</code></a>. I'm using Webpack as a build system and I tried to solve the problem by splitting the build into 3 parts: <code>manifest</code>, <code>polyfill</code>, and <code>app</code>. Manifest contains only the Webpack manifest, polyfill contains <code>core-js</code> and <code>zone.js</code>, and the rest is in the <code>app</code>. There's also a fourth chunk called <code>index</code>. This is the one placed into the website and it first checks if <code>window.Zone</code> is defined. If it is, only <code>manifest</code> and <code>app</code> are added. Otherwise also <code>polyfill</code>.</p>
  
  <p>The problem is that when <code>polyfill</code> chunk is not loaded, all modules in that chunk are missing from Webpack. So when the code reaches some <code>import</code> from the <code>app</code> chunk that requires either <code>core-js</code> or <code>Zone.js</code> (that's what I think is happening), I get this error:</p>
  
  <pre><code>TypeError: Cannot read property 'call' of undefined
      at __webpack_require__ (manifest.js:55)
      at Object.&lt;anonymous&gt; (app.js:15016)
      at __webpack_require__ (manifest.js:55)
      at Object.&lt;anonymous&gt; (app.js:65567)
      at __webpack_require__ (manifest.js:55)
      at Object.&lt;anonymous&gt; (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)
  </code></pre>
  
  <p>Somewhere in the manifest file:</p>
  
  <pre><code>/******/   // Execute the module function
  /******/   modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  </code></pre>
  
  <h3>QUESTION</h3>
  
  <p>How do I configure Webpack or Angular to not import <code>zone.js</code> as a dependency but to use that one already registered on the window? I want to be able to conditionally load <code>core-js</code> and <code>zone.js</code> only if it's not yet loaded on the website.</p>
  
  <h3>UPDATE</h3>
  
  <p>I modified my build (Webpack) to only use a single bundle. In that bundle, I tried using Webpack's <a href="https://webpack.js.org/guides/code-splitting/#dynamic-imports" rel="noreferrer">dynamic imports</a> like this:</p>
  
  <pre><code>// 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(() =&gt; {
  
      if (window.Zone) {
          bootstrap();
      }
      else {
          import('zone.js/dist/zone') // &lt;-- 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(() =&gt; console.debug('Exponea Free Editor has bootstrapped'));
  
  }
  </code></pre>
  
  <p>I'm using Typescript and that requires definition files. The problem is that <a href="https://github.com/angular/zone.js/issues/297#issuecomment-213883210" rel="noreferrer"><code>Zone.js</code> is an ambient dependency</a> so I get an error about missing definition files when I use it like this. How do I solve this?</p>