Hybrid app fails to bootstrap AngularJS if loaded from import

[greg73]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Attempting to bootstrap a hybrid app using UpgradeModule, if AngularJS is loaded using import * as angular from 'angular' 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.

Expected behavior
It should be possible to load AngularJS using import

Minimal reproduction of the problem with instructions
not working - https://plnkr.co/edit/KJijAJY8lQYRnnwuGOSK?p=preview
working (with script tag) - https://plnkr.co/edit/VQWj0OOmY5SF2i2Y9RmI?p=preview

What is the motivation / use case for changing the behavior?
To allow AngularJS to be bundled easily and use its type definitions

Please tell us about your environment:
Chrome 58 on Windows 10

• Angular version: 4.1

• Browser: Chrome 58 on Windows 10

• Language: Typescript 2.1

[gkalpak]

This happens because ngUpgrade needs a reference to angular before it kicks of the bootstrapping process.

By default, it looks on window.angular, which requires angular.js to have been already loaded. There are several ways to achieve this. One is using a <script> tag (as in your first example). Another one (which allows importing from 'angular') is importing angular.js before importing your main.js file (as seen in this example - look near the bottom of config-and-go.js):

Promise.resolve().
  then(() => System.import('angular')).
  then(() => System.import('app')).
  catch(err => console.error(err));

Alternatively, (on latest versions) you can explicitly set the AngularJS lib before you bootstrap (as seen in that example):

// main.ts
...
import {setAngularLib} from '@angular/upgrade/static';
import angular from 'angular';

setAngularLib(angular);
platformBrowserDynamic().bootstrapModule(DemoAppModule);

Closing since everything works as expected and what you want is already possible.

[greg73]

Thank you @gkalpak . setAngularLib is just what I was looking for. I hadn't spotted this in the changelog

[gkalpak]

@greg73, it is in the "Features" section for the 4.1.0-rc.0 release.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}