Angular 2 - Can't resolve all parameters for component: (?)

Question

I started an Angular2 app and I have an issue since days !

Can't resolve all parameters for HomeComponent: (?).(…)

But my issue is not about a particular provider : Everyting that I try to inject in my HomeComponent constructor return that error. No similars questions on that errors resolved my situation, and now I spent so much time looking for this that I can't find it.

App.moodule.ts :

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule } from '@angular/router'; import { SimpleNotificationsModule } from 'angular2-notifications'; // Controllers import { AppComponent } from './app.component'; import { HomeComponent } from './components/home.component'; // Service import { AuthService } from './services/auth.service'; // Guards import { AuthGuard } from './guards/auth.guard'; @NgModule({ imports: [ BrowserModule, RouterModule.forRoot([ { path: '', component: HomeComponent, canActivate: [AuthGuard] } ]), SimpleNotificationsModule ], declarations: [ AppComponent, HomeComponent ], providers: [ AuthGuard, AuthService, ], bootstrap: [ AppComponent ] }) export class AppModule { }

My HomeComponent :

import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { NotificationsService } from 'angular2-notifications'; import { AuthService } from '../services/auth.service'; @Component({ selector: 'home', templateUrl: '/templates/home.html' }) export class HomeComponent implements OnInit { public test: boolean = false; constructor( private _authService: AuthService ) {} ngOnInit() { this.test = true; } }

The AuthService that I try to import is empty, and as I said every providers that I inject in HomeComponent return that error. Each constructor argument create a new question mark in the error. Let me know if you need more code, but I don't think the rest (templates, systemjs.config.js...) is the problem

I suspect there is something wrong with imports or project config, not with the code. — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 8, 2016 at 17:45
Through about this but what could it be ? Do you want a particular file ? Ps : When I don't put any argument in constructor, it work fine. — Adam S
– Adam S, Commented Dec 8, 2016 at 17:48
Sorry, no idea. I'm not using TS myself and don't know about project configuration. — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 8, 2016 at 17:52
is this pointing to correct file? import { AuthService } from '../services/auth.service'; — Hareesh
– Hareesh, Commented Dec 8, 2016 at 17:54
@Hareesh Yes, my controller dir in which HomeController is, is in the same folder that the "services" dir. — Adam S
– Adam S, Commented Dec 8, 2016 at 17:57

Xealot · Accepted Answer · 2017-02-03 01:27:03Z

16

Make sure you have

"emitDecoratorMetadata": true,

in your tsconfig.js. You should not need to add @Inject() to your function parameters if that's enabled.

answered Feb 3, 2017 at 1:27

Xealot

1,66915 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sagar S. Over a year ago

I was facing this problem while developing SharePoint SPFx solution with Angular 5. This saved my day. Thanks

huizar_mx Over a year ago

Truly a lifesaver!

Jeba Prince · Accepted Answer · 2017-01-27 09:45:10Z

Import this

import {Inject} from '@angular/core';

And change your constructor to

constructor(@Inject(AuthService) _authService: AuthService) { }

you should @Inject any service into constructor before using it.

and your service should be injectable

@Injectable() export class AuthService { }

I was having this obscure error message pop up when using an abstract class which I hadn't made @Injectable. Adding @Injectable fixed it for me.

Josh · Accepted Answer · 2017-10-05 20:35:02Z

5

My problem ended up being nothing. I simply restarted the webpack watcher and then everything was fine. For reference, I'm using the Angular CLI.

answered Oct 5, 2017 at 20:35

Josh

4037 silver badges12 bronze badges

1 Comment

Божидар Йовчев Over a year ago

no idea why but that turned out to be my problem too... first made me cold sweaty for a bit cuz I was like "thats supposed to work.. wtf.."

Jolleyboy · Accepted Answer · 2017-08-29 14:02:58Z

The issue that raised this error for me was completely different. I had a logging category in the component that I had mistakenly used in the service, and thus the service had a dependency on the component and wasn't able to be created in time for it to be injected into the component.

TL;DR: Check the imports on the service that can't be injected.

dhananjay Surkutlawar · Accepted Answer · 2024-11-26 12:04:32Z

I encountered the same error:

NG0204: Can't resolve all parameters for SnowOracleEffects: (?, ?).

The issue was that I forgot to add the @Injectable() decorator to my effects class. Without this decorator, Angular cannot inject dependencies into the class.

Collectives™ on Stack Overflow

Angular 2 - Can't resolve all parameters for component: (?)

5 Answers 5

2 Comments

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

1 Comment

Comments

Comments

Linked

Related