title: Angular Hybrid Error: Trying to get the AngularJS injector before it being set
body: <h2>How to use AngularJS service in Angular 5 component?</h2>
  <p>I have AngularJS application and i am trying to make hybrid app but not able to use AngularJS service insight Angular component : getting error</p>
  <blockquote>
  <p>ERROR Error: Trying to get the AngularJS injector before it being set.</p>
  </blockquote>
  <p>my main.ts is</p>
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app.module';
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  <p>app.module :</p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule, InjectionToken } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  
  import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
  import { AppComponent } from './app.component';
  import { SignInComponent } from &quot;./modules/login/components/sign-in/sign-in.component&quot;;
  import { authServiceProvider } from './shared/angularJS-upgraded-providers';
  
  
  
  @NgModule({
      declarations: [
          AppComponent,
          SignInComponent
      ],
      imports: [
          BrowserModule,
          UpgradeModule,
          FormsModule
      ],
      entryComponents: [
          SignInComponent
      ],
      providers: [authServiceProvider],
      bootstrap: [SignInComponent]
  })
  
  export class AppModule {
      ngDoBootstrap() {}
  }
  </code></pre>
  <p>angularJS-upgraded-providers.ts :</p>
  <pre><code>import { InjectionToken } from &quot;@angular/core&quot;;
  export const AuthService = new InjectionToken&lt;any&gt;('authService');
  
  export function authServiceFactory(i: any) {
    return i.get('authService');
  }
  
  export const authServiceProvider = {
    provide: AuthService,
    useFactory: authServiceFactory,
    deps: ['$injector']
  };
  </code></pre>
  <p>and sign-in.component.ts :</p>
  <pre><code>import { Component, Inject } from '@angular/core';
  import {AuthService} from &quot;../../../../shared/angularJS-upgraded-providers&quot;;
  
  @Component({
      selector: 'sign-in',
      template: require('./sign-in.component.html')
  })
  
  export class SignInComponent {
      constructor(
          @Inject(AuthService) private authService: any) {
      }
  }
  </code></pre>
  <p>When I remove SignInComponent constructor part code compiles well but with @Inject(AuthService) private authService: any) { } part I am getting an error :</p>
  <blockquote>
  <p>Trying to get the AngularJS injector before it being set.</p>
  </blockquote>
  <p>Please give me some suggesting how can I implement angularJS service insight Angular component.
  Thanks</p>
  <p>P.S. my package.json :</p>
  <pre><code>{
    &quot;name&quot;: &quot;test&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;webpack-dev-server --port=4200 --open chrome&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@angular/common&quot;: &quot;^5.2.11&quot;,
      &quot;@angular/compiler&quot;: &quot;^5.2.11&quot;,
      &quot;@angular/core&quot;: &quot;^5.2.11&quot;,
      &quot;@angular/forms&quot;: &quot;^5.2.11&quot;,
      &quot;@angular/http&quot;: &quot;^5.2.11&quot;,
      &quot;@angular/platform-browser&quot;: &quot;^5.2.11&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;^5.2.11&quot;,
      &quot;@angular/router&quot;: &quot;^5.2.11&quot;,
      &quot;@angular/upgrade&quot;: &quot;^5.2.11&quot;,
      &quot;core-js&quot;: &quot;^2.5.7&quot;,
      &quot;reflect-metadata&quot;: &quot;^0.1.12&quot;,
      &quot;rxjs&quot;: &quot;^5.5.11&quot;,
      &quot;zone.js&quot;: &quot;^0.8.26&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@types/jquery&quot;: &quot;^3.3.6&quot;,
      &quot;@types/node&quot;: &quot;^8.10.23&quot;,
      &quot;awesome-typescript-loader&quot;: &quot;^5.2.0&quot;,
      &quot;css-loader&quot;: &quot;^1.0.0&quot;,
      &quot;html-loader&quot;: &quot;^0.5.5&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^3.2.0&quot;,
      &quot;raw-loader&quot;: &quot;^0.5.1&quot;,
      &quot;style-loader&quot;: &quot;^0.22.1&quot;,
      &quot;ts-loader&quot;: &quot;3.2.0&quot;,
      &quot;typescript&quot;: &quot;^2.9.2&quot;,
      &quot;webpack&quot;: &quot;^4.16.5&quot;,
      &quot;webpack-cli&quot;: &quot;^3.1.0&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.1.5&quot;
    }
  }
  </code></pre>
  <p>And AngularJS version : 1.6.8</p>