Angular Hybrid (Angular1 and Angular2) App $injector is undefined

482 Views Asked by At

I have been struggling with this issue for quite some time now. Maybe someone can give me some hints or an answer.

I am trying to set up and ng1-ng2 Hybrid app following the angular upgrade guide

https://angular.io/docs/ts/latest/guide/upgrade.html

If I bootstrap like this:

// app.module.ts
@NgModule({
  imports: [
    RouterModule.forRoot(...)
    BrowserModule,
    UpgradeModule
  ],
  entryComponent: [ AppComponent ]
})
export class AppModule {
  ngDoBootstrap() {}
}

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['app'], {strictDi: true});
});

The angular2 router does somehow not get setup correctly (shouldProcessUrl is never called)

And if I bootstrap with a angular2 component I get the problem that $injector is undefined.

I have created this plnkr to recreate the issue: (EDIT: new plnkr)

https://plnkr.co/edit/mUvt7miMrOEyTyEk8ooX?p=preview

TypeError: Cannot read property 'get' of undefined
    at useFactory (https://run.plnkr.co/lohIgMlIbiNzGEHg/src/app.ts!transpiled:65:45)
    at AppModuleInjector.get (/AppModule/module.ngfactory.js:140:73)
    at AppModuleInjector.getInternal (/AppModule/module.ngfactory.js:192:50)
    at AppModuleInjector.NgModuleInjector.get (https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js:8918:48)
    at CompiledTemplate.proxyViewClass.AppView.injectorGet (https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js:12319:49)
    at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js:12699:53)
    at CompiledTemplate.proxyViewClass.View_RootComponent_Host0.createInternal (/AppModule/RootComponent/host.ngfactory.js:15:65)
    at CompiledTemplate.proxyViewClass.AppView.createHostView (https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js:12275:25)
    at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js:12683:56)
    at ComponentFactory.create (https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js:7710:29)
    at ApplicationRef_.bootstrap (https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js:8677:61)
    at eval (https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js:8506:93)
    at Array.forEach (native)
    at PlatformRef_._moduleDoBootstrap (https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js:8506:46)
    at eval (https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js:8458:31)

To sum it up:

If I use an angular1 component as root and mark the angular2 "rootComponent" as entyComponent the angular2 router does not get initialized.(https://angular.io/docs/ts/latest/guide/upgrade.html#!#bootstrapping-hybrid-applications)

And if I use and angular2 component as root I get the $injector issue (as shown in the plnkr) ONLY if the "initial route (/login)" is an angular2 route. If I start with an angular1 router and then change to the angular2 route (/login) everything works fine. (https://angular.io/docs/ts/latest/guide/upgrade.html#!#dividing-routes-between-angular-and-angularjs)

I would be really thankful for any piece of advice.

Thank you very much in advance Robin

0

There are 0 best solutions below