I've built a basic app in Angular, but I have encountered a strange issue where I cannot inject a service into one of my components. It injects fine into any of the three other components I have created, however.
For starters, this is the service:
import { Injectable } from '@angular/core'; @Injectable() export class MobileService { screenWidth: number; screenHeight: number; constructor() { this.screenWidth = window.outerWidth; this.screenHeight = window.outerHeight; window.addEventListener("resize", this.onWindowResize.bind(this) ) } onWindowResize(ev: Event) { var win = (ev.currentTarget as Window); this.screenWidth = win.outerWidth; this.screenHeight = win.outerHeight; } }
And the component that it refuses to work with:
import { Component, } from '@angular/core'; import { NgClass } from '@angular/common'; import { ROUTER_DIRECTIVES } from '@angular/router'; import {MobileService} from '../'; @Component({ moduleId: module.id, selector: 'pm-header', templateUrl: 'header.component.html', styleUrls: ['header.component.css'], directives: [ROUTER_DIRECTIVES, NgClass], }) export class HeaderComponent { mobileNav: boolean = false; constructor(public ms: MobileService) { console.log(ms); } }
The error I get in the browser console is this:
EXCEPTION: Can't resolve all parameters for HeaderComponent: (?).
I have the service in the bootstrap function so it has a provider. And I seem to be able to inject it into the constructor of any of my other components without issue.
The Inject decorator is a constructor parameter used to specify a custom provider of a dependency.
Dependency injection, or DI, is one of the fundamental concepts in Angular. DI is wired into the Angular framework and allows classes with Angular decorators, such as Components, Directives, Pipes, and Injectables, to configure dependencies that they need.
Import it from the file where it is declared directly instead of the barrel.
I don't know what exactly causes the issue but I saw it mentioned several times (probably some kind of circular dependency).
It should also be fixable by changing the order of the exports in the barrel (don't know details, but was mentioned as well)
In addition to the previous answers given, it seems this error is thrown as well when your injectable service is missing the actual @Injectable()
decorator. So before you debug the cyclic dependency thing and the order of your imports/exports, do a simple check whether your service actually has @Injectable()
defined.
This applies to the current Angular latest, Angular 2.1.0.
I opened an issue on this matter.
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