Angular2 UpgradeComponent missing $injector
I had a similar problem. To fix my issue, I removed the following line from my AppModule definition:
bootstrap: [AppComponent]In my case, I also had to add the AppComponent to my entryComponents section:
entryComponents: [AppComponent]You also need to implement the ngDoBootstrap method, if you haven't already:
export class AppModule { ngDoBootstrap() {}}
Here is a plunker of a working example I created. I was having the same issue as you described. The key for me was to downgrade my AppComponent and place the downgraded component into the Angular 1 app:
import { App1Component } from './app1.component';import { App } from './app';import { downgradeComponent } from '@angular/upgrade/static';angular.module('ng1', []) .directive( 'ng2AppComponent', downgradeComponent({component: App}) ) .component('app1Component', App1Component);index.html:
...<body> <ng2-app-component></ng2-app-component></body>...Then I needed to do as described above and move AppComponent to entryComponents in my AppModule.
@NgModule({ imports: [ BrowserModule, UpgradeModule ], declarations: [ App, App1Directive ], entryComponents: [ App ]})export class AppModule { ngDoBootstrap() {}}In my example the downgraded Angular 2 AppComponent is in the index.html but you can place it in whatever Angular 1 template you want if that makes more sense for your application.
It can't use ng1 directive upgraded by UpgradeComponent,when you use ng2 to bootstrap your application.
You need use ng1 to bootstrap application and ng2 component,then use ng1 directive in ng2 component.
Which needs remove all content in bootstrap of @NgModule,and move AppComponent to entryComponents,then empty ngDoBootstrap() in AppModule:
@NgModule({ bootstrap: [ ], //... entryComponents: [ AppComponent, //... ]})export class AppModule { public ngDoBootstrap() {}}After that,downgrade AppComponent:
import { AppComponent } from '../app.component';import { downgradeComponent } from '@angular/upgrade/static';//...angular.directive( 'app', downgradeComponent({ component: AppComponent }) as angular.IDirectiveFactory);And now,you can render a ng1 directive upgraded,in ng2 component.
More Details:Angular2 UpgradeComponent missing $injector