Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accessing root Angular 2 injector instance globally

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.

like image 858
Ivan Avatar asked Apr 06 '16 15:04

Ivan


Video Answer


2 Answers

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.

like image 181
Thierry Templier Avatar answered Sep 19 '22 15:09

Thierry Templier


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
like image 36
Max Koretskyi Avatar answered Sep 17 '22 15:09

Max Koretskyi