<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When using CommonJS (or ES2015 modules), the order of imports matters when importing an AngularJS app to bootstrap. Here is an example Plunkr that demonstrates the problem: <a href="https://plnkr.co/edit/lKE6a3sPqjMWvoWJF9oT?p=preview" rel="nofollow">https://plnkr.co/edit/lKE6a3sPqjMWvoWJF9oT?p=preview</a></p>
<p dir="auto">But basically:</p>
<p dir="auto">When AngularJS lives in: <code class="notranslate">app.js</code> like this one:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as angular from 'angular';

export default angular.module('app', [])
  .run(function() { console.log('Angular 1 is running!')})"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-s1">angular</span> <span class="pl-k">from</span> <span class="pl-s">'angular'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-s1">angular</span><span class="pl-kos">.</span><span class="pl-en">module</span><span class="pl-kos">(</span><span class="pl-s">'app'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
  <span class="pl-kos">.</span><span class="pl-en">run</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'Angular 1 is running!'</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">and Angular lives in <code class="notranslate">main.ts</code> like this one:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import 'core-js/es7/reflect';
import 'zone.js';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';

import app from '../app/app';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule).then(platformRef =&gt; {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, [app.name], { strictDi: true})
})"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s">'core-js/es7/reflect'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s">'zone.js'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">platformBrowserDynamic</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/platform-browser-dynamic'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">UpgradeModule</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/upgrade/static'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">AppModule</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./app.module'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-s1">app</span> <span class="pl-k">from</span> <span class="pl-s">'../app/app'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">platform</span> <span class="pl-c1">=</span> <span class="pl-en">platformBrowserDynamic</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">platform</span><span class="pl-kos">.</span><span class="pl-en">bootstrapModule</span><span class="pl-kos">(</span><span class="pl-smi">AppModule</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">platformRef</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">upgrade</span> <span class="pl-c1">=</span> <span class="pl-s1">platformRef</span><span class="pl-kos">.</span><span class="pl-c1">injector</span><span class="pl-kos">.</span><span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-smi">UpgradeModule</span><span class="pl-kos">)</span> <span class="pl-k">as</span> <span class="pl-smi">UpgradeModule</span><span class="pl-kos">;</span>
  <span class="pl-s1">upgrade</span><span class="pl-kos">.</span><span class="pl-en">bootstrap</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">strictDi</span>: <span class="pl-c1">true</span><span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">The bootstrap will fail with:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Unhandled Promise rejection: AngularJS v1.x is not loaded! ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: Error: AngularJS v1.x is not loaded!"><pre class="notranslate"><code class="notranslate">Unhandled Promise rejection: AngularJS v1.x is not loaded! ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: Error: AngularJS v1.x is not loaded!
</code></pre></div>
<p dir="auto">However, moving <code class="notranslate">import app from './app'</code> before <code class="notranslate">zone.js</code> import, the bootstrap will work</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Importing an AngularJS app should work after the main dependency imports like <code class="notranslate">zone.js</code> and <code class="notranslate">reflect</code> and other libraries.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Here is the Plunkr: <a href="https://plnkr.co/edit/lKE6a3sPqjMWvoWJF9oT?p=preview" rel="nofollow">https://plnkr.co/edit/lKE6a3sPqjMWvoWJF9oT?p=preview</a></p>
<p dir="auto">The code above also recreates the problem</p>
<p dir="auto"><strong>Please tell us about your environment:</strong> Windows 10, VSCode, Webpack bundling (SystemJS fails as well).</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> Angular 4.1.0 and AngularJS 1.6.4</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript</p>
</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Attempting to bootstrap a hybrid app using UpgradeModule, if AngularJS is loaded using <code class="notranslate">import * as angular from 'angular'</code> then the console reports the error 'AngularJS v1.x is not loaded!' if AngularJS is loaded from a script tag, the application boostraps correctly without error.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
It should be possible to load AngularJS using import</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
not working - <a href="https://plnkr.co/edit/KJijAJY8lQYRnnwuGOSK?p=preview" rel="nofollow">https://plnkr.co/edit/KJijAJY8lQYRnnwuGOSK?p=preview</a><br>
working (with script tag) - <a href="https://plnkr.co/edit/VQWj0OOmY5SF2i2Y9RmI?p=preview" rel="nofollow">https://plnkr.co/edit/VQWj0OOmY5SF2i2Y9RmI?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
To allow AngularJS to be bundled easily and use its type definitions</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Chrome 58 on Windows 10</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 4.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> Chrome 58 on Windows 10</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong>  Typescript 2.1</p>
</li>
</ul>