Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hybrid app fails to bootstrap AngularJS if loaded from import #16484

greg73 opened this issue May 2, 2017 · 4 comments

Hybrid app fails to bootstrap AngularJS if loaded from import #16484

greg73 opened this issue May 2, 2017 · 4 comments


Copy link

@greg73 greg73 commented May 2, 2017

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

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 -
working (with script tag) -

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

Copy link

@gkalpak gkalpak commented May 3, 2017

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):

  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';


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

@gkalpak gkalpak closed this May 3, 2017
Copy link

@greg73 greg73 commented May 3, 2017

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

Copy link

@gkalpak gkalpak commented May 3, 2017

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

Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 11, 2019

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 11, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants