Trying to get the AngularJS injector before it being set

[timruhle]

When upgrading to version 4 of angular-hybrid the changelog says to change UIRouterModule with UIRouterUpgradeModule. However my lazy loading Angular 5 routes were throwing the error Trying to get the AngularJS injector before it being set. I had to reset my lazy loaded Angular 5 routes to using UIRouterModule.forChild().

This may want to be explained in the documentation

[EzraBrooks]

Having this same problem. UIRouterModule.forChild() makes my application fail to bootstrap entirely.

[happysamyak]

Remove bootstrap from @NgModule. Add bootstrap in main.ts file-

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['myApp'], { strictDi: true });
});

[christopherthielen]

This can happen when your bootstrapModule tries to bootstrap a component which uses a @uirouter/angular component.

Non-working example that bootstraps an Angular component

https://stackblitz.com/edit/ui-router-angular-hybrid-do-not-bootstrap-angular-component?file=app%2Fapp.module.ts

index.html:
<app>loading</app>

app.component.ts:

const template = `
    <a uiSref="angular" uiSrefActive="active">angular</a>
    <ui-view></ui-view>
`; // uses @uirouter/angular directives

@Component({
  selector: 'app',
  template: template,
})
export class AppComponent  {}

app.module.ts:

@NgModule({
  imports: [ 
    BrowserModule, 
    UpgradeModule,
    UIRouterUpgradeModule.forChild({ states, config })
  ],
  declarations: [ GenericComponent, AppComponent ],
  bootstrap: [AppComponent] // whoops, this causes @uirouter/angular to bootstrap before angularjs is ready
})

Working example that bootstraps AngularJS markup in index.html

Instead, let AngularJS handle the root component and either route to AppComponent or put the AppComponent markup in index.html, as AngularJS:

https://stackblitz.com/edit/ui-router-angular-hybrid?file=main.ts

index.html:

    <a ui-sref="angular" ui-sref-active="active">angular</a>
    <a ui-sref="angularjs" ui-sref-active="active">angularjs</a>
    <a ui-sref="angularjs.angular" ui-sref-active="active">angularjs.angular</a>
    <ui-view></ui-view>

app.component.ts:

const template = `
    <a uiSref="angular" uiSrefActive="active">angular</a>
    <ui-view></ui-view>
`; // uses @uirouter/angular directives

@Component({
  selector: 'app',
  template: template,
})
export class AppComponent  {}

app.module.ts:

@NgModule({
  imports: [ 
    BrowserModule, 
    UpgradeModule,
    UIRouterUpgradeModule.forChild({ states, config })
  ],
  declarations: [ GenericComponent ],
})
class AppModule {
  ngDoBootstrap() {}
}

[christopherthielen]

@timruhle thank you for the analysis on the lazy loading issue. I'll update the docs with your findings.

[christopherthielen]

@timruhle after further analysis, I think we need UIRouterUpgradeModule.forRoot() for the root angular module and UIRouterUpgradeModule.forChild() for everything else.

[timruhle]

@christopherthielen I can confirm that for me, using UIRouterUpgradeModule.forRoot() in the root angular module and UIRouterUpgradeModule.forChild() for the lazy loaded routes, works great. Thanks for the fix 👍

[claudiuconstantin]

In my case the fix was tweaking the main Angular module, adding the .bootstrap(...) call in the ngDoBootstrap() method:

public ngDoBootstrap() {
	this.upgrade.bootstrap(document.body, ["app"], { strictDi: true });
}