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.
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:
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With