I'm currently diving into Angular's upgrade guide in order to master the art of embedding AngularJS components within an Angular application. I've set up a basic Angular app using the Angular CLI and included a straightforward AngularJS module as a dependency.
After executing ng serve, the app compiles seamlessly without any errors. However, during runtime, I encounter the following message in the console:
Error: Trying to get the AngularJS injector before it being set.
What is causing this issue, and what steps can I take to prevent it? I've followed the guidelines outlined in the upgrade guide without deviation.
This is how I am upgrading my AngularJS component within the Angular app:
// example.directive.ts
import { Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
// Importing the npm module containing the AngularJS component
import { MyComponent } from '@my-company/module-test';
@Directive({
selector: 'my-upgraded-component'
})
export class ExampleDirective extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) {
// The .injectionName property represents the component's selector string; in this case, "my-component".
super(MyComponent.injectionName, elementRef, injector);
}
}
Additionally, here's my app.module.ts:
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UpgradeModule } from '@angular/upgrade/static';
import { ExampleDirective } from './example.directive';
import { myModuleName } from '@my-company/module-test';
@NgModule({
declarations: [AppComponent, ExampleDirective],
imports: [BrowserModule, AppRoutingModule, UpgradeModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) {}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, [myModuleName], {
strictDi: true
});
}
}
The Angular version I am utilizing is 5.2.0.