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

Closed
greg73 opened this Issue May 2, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@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 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 comment has been minimized.

Member

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

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.

@gkalpak gkalpak closed this May 3, 2017

@greg73

This comment has been minimized.

greg73 commented May 3, 2017

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

@gkalpak

This comment has been minimized.

Member

gkalpak commented May 3, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment