web-dev-qa-db-fra.com

Angular 2 - Impossible de résoudre tous les paramètres du composant: (?)

J'ai lancé une application Angular2 et j'ai un problème depuis des jours! 

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

Mais mon problème ne concerne pas un fournisseur en particulier: tout ce que j'essaie d'injecter dans mon constructeur HomeComponent renvoie cette erreur. Aucune question similaire sur ces erreurs n'a résolu ma situation, et maintenant je passais tellement de temps à chercher cela que je ne le trouvais pas.

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 { }

Mon composant d'accueil:

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;
    }
}

Le AuthService que j'essaie d'importer est vide et, comme je l'ai dit, tous les fournisseurs que j'injecte dans HomeComponent renvoient cette erreur. Chaque argument de constructeur crée un nouveau point d'interrogation dans l'erreur. Faites-moi savoir si vous avez besoin de plus de code, mais je ne pense pas que le reste (modèles, systemjs.config.js ...) soit le problème 

angulardependency-injectioncomponents
5
Adam S

Assurez-vous que vous avez

"emitDecoratorMetadata": true,

dans votre tsconfig.js. Vous ne devriez pas avoir besoin d'ajouter @Inject() à vos paramètres de fonction si cela est activé.

9
Xealot

Importer cette

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

Et changez votre constructeur en

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

}

vous devez @Injecter n'importe quel service dans le constructeur avant de l'utiliser.

et votre service devrait être injectable

@Injectable()
export class AuthService {

}
6
Jeba Prince

Mon problème a fini par être rien. J'ai simplement redémarré l'observateur Webpack, puis tout allait bien. Pour référence, j'utilise le Angular CLI.

2
Josh

La question qui a soulevé cette erreur pour moi était complètement différente. J'avais une catégorie de journalisation dans le composant que j'avais utilisée par erreur dans le service. Par conséquent, le service avait une dépendance sur le composant et ne pouvait pas être créé à temps pour qu'il soit injecté dans le composant. 

TL; DR: vérifie les importations sur le service qui ne peuvent pas être injectées.

0
Jolleyboy