Accessing root Angular 2 injector instance globally

Question

How to access an instance of root Angular 2 injector globally (say, from browser console).

In Angular 1 it was angular.element(document).injector().

It can be useful during testing and exploration, to use browser console to get injector to then access instances of different components, directives, services etc.

Answer 1

You must set it into a service after bootstrapping the application:

export var applicationInjector: Injector;

bootstrap([AppComponent]).then((componentRef: ComponentRef) => {
  applicationInjector = componentRef.injector;
});

Then you can import it into other parts of your application:

import {applicationInjector} from './bootstrap';

See this question for more details:

• Good way to secure multiple Angular 2 components

Edit

You can inject the ApplicationRef into components and have access to the root injector through it:

@Component({
  (...)
})
export class SomeComponent {
  constructor(private app:ApplicationRef) {
    var rootInjector = app.injector;
  }
}

You need to leverage dependency injection to get it.

Answer 2

In Angular v.4.x.x the root injector is located on the PlatformRef. You can access it like this:

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

// create a platform    
let platform = platformBrowserDynamic();

// save reference to the global object
window['rootInjector'] = platform.injector;

// boostrap application
platform.bootstrapModule(AppModule);

Or inside any component like this:

export class AppComponent {
  constructor(platform: PlatformRef) {
      console.log(platform.injector);

But the root injector is pretty useless. It contains mostly compiler and platform specific data and helpers:

[
  "InjectionToken Platform ID",
  "PlatformRef_",
  "PlatformRef",
  "Reflector",
  "ReflectorReader",
  "TestabilityRegistry",
  "Console",
  "InjectionToken compilerOptions",
  "CompilerFactory",
  "InjectionToken Platform Initializer",
  "PlatformLocation",
  "InjectionToken DocumentToken",
  "InjectionToken Platform: browserDynamic",
  "InjectionToken Platform: coreDynamic",
  "InjectionToken Platform: core"
]

You're probably looking for AppModule injector which you can get like this:

platform.bootstrapModule(AppModule).then((module) => {
  window['rootInjector'] = module.injector;
});

You can extract ApplicationRef or root ComponentRef from it:

platform.bootstrapModule(AppModule).then((module) => {
  let applicationRef = module.injector.get(ApplicationRef);
  let rootComponentRef = applicationRef.components[0];
});

Also, if Angular is running in the development mode, you can get either AppModule or lazy loaded NgModule injector like this:

ng.probe($0).injector.view.root.ngModule