CODEWITHSUNDEEP
angulardependency-injection
Slava Fomin II
Slava Fomin II

Reputation: 28661

Inject token value to global container in Angular 2, Can't resolve all parameters

I'm trying to inject value globally to my application's DI container in Angular 2 according to the official documentation.

However, I'm getting an error:

compiler.es5.js:1540 Uncaught Error: Can't resolve all parameters for AppComponent: (?).
    at syntaxError (http://localhost:4200/vendor.bundle.js:30216:34)
    at CompileMetadataResolver._getDependenciesMetadata (http://localhost:4200/vendor.bundle.js:43553:35)
    at CompileMetadataResolver._getTypeMetadata (http://localhost:4200/vendor.bundle.js:43421:26)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:4200/vendor.bundle.js:43030:24)
    at CompileMetadataResolver._getEntryComponentMetadata (http://localhost:4200/vendor.bundle.js:43674:45)
    at http://localhost:4200/vendor.bundle.js:43257:110
    at Array.map (native)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/vendor.bundle.js:43257:73)
    at JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:54306:66)
    at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:54265:52)

Here's my classes:

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {InjectionToken, NgModule} from '@angular/core';

import {AppComponent} from './app.component';

export interface AppConfig {
  apiEndpoint: string;
  title: string;
}

export const HERO_DI_CONFIG: AppConfig = {
  apiEndpoint: 'api.heroes.com',
  title: 'Dependency Injection'
};

export let APP_CONFIG = new InjectionToken<AppConfig>('app.config');


@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts

import {Component as NgComponent, Inject} from '@angular/core';
import {APP_CONFIG, AppConfig} from './app.module';


@NgComponent({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor (@Inject(APP_CONFIG) config: AppConfig) {
    console.log(config.apiEndpoint, config.title);
  }
}

What could be the problem and what debugging strategy should I use? The error and stack trace doesn't really help me here.

Upvotes: 1

Views: 1890

Answers (1)

eko
eko

Reputation: 40677

As @yurzui stated here: @Inject() for InjectionToken declared in module fails in angular2

You should move export let APP_CONFIG = new InjectionToken<AppConfig>('app.config'); to a seperate file since it's causing a circular dependency issue.

Upvotes: 3

Related Questions