title: Error when using AngularJS component inside Angular app: "Error: Trying to get the AngularJS injector before it being set."
body: <p>I'm working through Angular's <a href="https://angular.io/guide/upgrade" rel="noreferrer">upgrade guide</a> to learn how to embed AngularJS components in an Angular app.  I've created a bare-bones Angular app using the <a href="https://cli.angular.io/" rel="noreferrer">Angular CLI</a> and added a simple AngularJS module as a dependency.</p>
  
  <p>When I run <code>ng serve</code>, the application compiles with no errors. However, at runtime, I get this message in the console:</p>
  
  <pre><code>Error: Trying to get the AngularJS injector before it being set.
  </code></pre>
  
  <p>What is causing this error, and how can I avoid it?  I haven't deviated from the steps detailed in the upgrade guide.</p>
  
  <p>Here's how I'm upgrading my AngularJS component inside my Angular app:</p>
  
  <pre><code>// example.directive.ts
  import { Directive, ElementRef, Injector } from '@angular/core';
  import { UpgradeComponent } from '@angular/upgrade/static';
  
  // this is the npm module that contains 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 is the component's selector
          // string; "my-component" in this case.
          super(MyComponent.injectionName, elementRef, injector);
      }
  }
  </code></pre>
  
  <p>And here's my <code>app.module.ts</code>:</p>
  
  <pre><code>// 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
          });
      }
  }
  </code></pre>
  
  <p>I'm using Angular 5.2.0.</p>