angular/upgrade static $injector is undefined when upgrading ng1 service

[Nevergonnachange]

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
I cannot inject an upgraded ng1 service into a ng2 component. Because $injector is undefined.

Expected behavior
I can inject the upgraded ng1 service

Minimal reproduction of the problem with instructions
If I use an angular2 component as root (as described here: https://angular.io/docs/ts/latest/guide/upgrade.html#!#dividing-routes-between-angular-and-angularjs) I get the $injector issue (as shown in the plnkr bellow) ONLY if the "initial route (/login)" is an angular2 route. If I start with an angular1 route and then change to the angular2 route (/login) everything works fine.
https://plnkr.co/edit/mUvt7miMrOEyTyEk8ooX?p=preview

What is the motivation / use case for changing the behavior?
To use angular1 services within an angular2 context while gradually moving towards an angular2 application.

Please tell us about your environment:
OS: Windows 10
IDE: Webstorm
Package manager: NPM,
Build system: Webpack,
Webserver: webpack-dev-server

• Angular version: 2.0.X
  2.4.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Typescript 2.2.1

• Node (for AoT issues): node --version =
  6.1

[gkalpak]

This is expected (in a way), because the bootstrapped component gets instantiated before bootstrapping the AngularJS part (and therefore the AngularJS $injector has not been created yet). We are looking into some ways to overcome such limitations. There are also some subtle zone-related issues with bootstrapping AngularJS in the bootstrapModule().then (the relevant docs will be revised soon).

In your's plnkr's simple usecase you can bootstrap AngularJS inside the AppModule's constructor (updated plnkr), but it is possible that the solution is not as straight forward in more complex scenarios:

@NgModule({
  ...
  bootstrap: [RootComponent],
})
class AppModule {
  constructor(upgrade: UpgradeModule) {
    upgrade.bootstrap(document.documentElement, ['demo']);
  }
}

platformBrowserDynamic().bootstrapModule(AppModule);

[pengx17]

Similar issue here. When bootstrapping with an Angular component, the UpgradeComponent will have its $injector as null.
I suppose the reason why the official upgrade guide uses Angular component to do bootstrap is to have two routing systems work side by side, but it will derive a limitation that we won't be able utilize any upgrade stuff in this way.
I am wondering if it is possible to downgrade the Angular component (which contains the router-outlet component in the template) while also be able to reflect routing views?

[Vizer]

@gkalpak, thank you for solution. I had same issue but now I have exception No provider for $scope! when I am trying to use upgraded component in angular 2 template. Updated plunker here
Is it one of more complex scenario that you mentioned? Any workarounds for this case?

[gkalpak]

This happens, because upgrade/static expects that each upgraded component will be in the template of a downgraded component (which would be true if you had downgraded the RootComponent). But this might not work with the routing setup you have.

From a quick look, you could add a provider for $scope (which the upgraded Ng1FooDirective will look for) pointing it to the $rootScope:

@NgModule({
  ...
  providers: [
    ...
    {
      provide: '$scope',
      useFactory: i => i.get('$rootScope'),
      deps: ['$injector']
    }
  ]
})

This works for you updated plnkr, but - again - might break for more complex usecases 😃

[Vizer]

@gkalpak, thanks for answer. It works for me

[Nevergonnachange]

@gkalpak, thanks for the answer. Your suggestion works fine for me. Maybe this (or sth similar) should be added in the official docs.

[JamesHenry]

My hack to workaround the related case of wanting to eagerly load Angular 2+ Providers which currently have dependencies which are upgraded Angular 1 Providers (issue is still ultimately about $injector not being available at the right time):

const eagerlyLoadedNg2ProvidersWithNg1Dependencies = [ ... ]

/**
 * First bootstrap the Angular 2 app
 */
return platformRef.bootstrapModule(AppModule).then((ref) => {

	/**
	 * Then bootstrap the Angular 1 app
	 */
	const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule

	upgrade.bootstrap(document.body, [Ng1AppModule], {
		strictDi: true,
	})

	/**
	 * Force the Providers to be eagerly loaded.
	 */
	setTimeout(() => {
		eagerlyLoadedNg2ProvidersWithNg1Depdencies.forEach((provider) => ref.injector.get(provider))
	})

})
.catch((err) => console.error(err))

[KhoaSydney]

I am also facing the same issues. Would someone provide an update on the progress please??? I'm stuck at moment.

Cheers,
Khoa

[gkalpak]

@KhoaSydney, not sure what the issue is. ngUpgrade currently expects a specific structure (i.e. AngularJS owning to top-level element). There are a couple of workarounds posted above for cases where you want to circumvent that.

(We are currently investigating building #14993 (comment) into ngUpgrade, but in the meantime nothing stops you from applying it yourself.)

If you are still running into difficulties, it is probably a different problem, in which case you should submit a new issue (including all necessary info).

[KhoaSydney]

Hi @gkalpak ,

We have AngularJS owing the top-level as you explained but we still come across an error Cannot read property 'get' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'get' of undefined due to $injector is undefined. It looks like Angular is started first before AngularJS started to bootstrap itself. Due to code complexity within the project, it is impossible to setup the plunker for you to have a look. This is the code that we run:

import NavigationModeService from "route/navigation-mode.service";

import SilverlightModule from "silverlight.module";
import { UpgradeModule } from '@angular/upgrade/static/';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import app2Module from "app2.module";

angular.module("adviceos.silverlight", [])
    .config(["$locationProvider", ($locationProvider) => {
        $locationProvider.html5Mode(true);
    }])
    .factory(NavigationModeService.id, ["$http", "$location", ($http, $location) => new NavigationModeService($http, $location)])
    .directive("silverlightObject", SilverlightObject.factory());


//angular.bootstrap(document.getElementById("silverlightPluginContainer"), ["adviceos.silverlight"]);

platformBrowserDynamic().bootstrapModule(app2Module).then(ref => {
    // Once Angular bootstrap is complete then we bootstrap the AngularJS module
    const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;

    upgrade.bootstrap(document.getElementById("silverlightPluginContainer"), ["adviceos.silverlight"]);
});```

error is thrown in below:

```@NgModule({
    imports: [
        FundsbaseModule,
        BrowserModule,
        FormsModule,
        HttpModule,
        SoARequestModule,
        ClientModule,
        MidwinterModule,
        ModellingModule,
        ControlsModule,
        Html5ConfigSettingModule,
        BrowserAnimationsModule,
        RouterModule.forRoot(appRoutes),
        UpgradeModule
    ],
    providers: [
        {
            provide: App.id, useFactory: (i: any) => {
                alert(i);
                i.get(App.id);
            }, deps: ['injector']
        },
        {
            provide: ContextFactory.id,
            useFactory: (i: any) => {
                i.get(ContextFactory.id);
            }, deps: ['$injector']
        },
        {
            provide: "logger", useFactory: (i: any) => {
                i.get("logger");
            }, deps: ['$injector']
        },
        {
             
            provide: "dialogService",
            useFactory: (i: any) => {
         
                i.get("dialogService");
            }, deps: ['$injector']
        },
        {
            provide:"common", useFactory: (i: any) => {
                alert(i);
                i.get("common");
            }, deps: ['$injector']
        },
       

        LocationTrackingConstant,
        ExceptionLoggingService,
        NotesViewerService,
        { provide: ErrorHandler, useClass: CustomErrorHandler }
    ],
    entryComponents: [
        ,
     .....
       ],
    declarations: [
     .......
    ],
 
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export default class AppModule {

    ngDoBootstrap() { /* this is a placeholder to stop the boostrapper from complaining */
    }
   
}```

[gkalpak]

@KhoaSydney, it is really next to impossible to tell what might be causing this. The code looks fine (except for the App.id provider which injects 'injector' instead of '$injector' - I assume it is a copy-paste typo).

OOC, does the error appear before or after the AppModule's ngDoBootstrap call?