web-dev-qa-db-fra.com

Angular 6 - impossible de résoudre tous les paramètres pour AppComponent

J'essaie de créer une application avec Angular 6 et je suis toujours en train de tout configurer. Mais il semble qu'il y ait un problème avec l'injection de dépendance dans mon application. 

Il ne peut résoudre aucun paramètre de constructeur. Ils résultent tous en Uncaught Error: Can't resolve all parameters for AppComponent: (?).. Même un service personnalisé entraîne la même erreur. 

Versions (omis les dépendances qui n'ont aucune influence sur ceci)

 "dependencies": {
    "@angular/common": "6.0.5",
    "@angular/compiler": "6.0.5",
    "@angular/core": "6.0.5",
    "@angular/forms": "6.0.5",
    "@angular/http": "6.0.5",
    "@angular/platform-browser": "6.0.5",
    "@angular/platform-browser-dynamic": "6.0.5",
    "@angular/router": "6.0.5",
    "core-js": "2.5.7",
    "reflect-metadata": "0.1.12",
    "rxjs": "6.2.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "6.0.5",
    "@ngtools/webpack": "6.0.8",
    "angular2-template-loader": "0.6.2",
    "awesome-TypeScript-loader": "5.1.0",
    "TypeScript": "2.7.2",
    "webpack": "4.12.0",
    "webpack-cli": "3.0.8",
    "webpack-dev-server": "3.1.4",
  }

app.module.ts 

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

TestService.ts 

import {Injectable} from "@angular/core";

@Injectable({
  providedIn: 'root'
})
export class TestService {

  constructor() {
    console.warn("It works!");
  }

  public sayHello(): string {
    return "hello world!";
  }
}

App.component.ts 

import {Component} from '@angular/core';
import {TestService} from "./TestService";

@Component({
  selector: 'sh-home',
  styleUrls: ['./home.scss'],
  templateUrl: './home.html'
})
export class HomeComponent {

  constructor(testService: TestService) {
    testService.sayHello();
  }
}

L'injection de TestService donne l'erreur dans ce cas

Main.ts 

import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app/app.module';
import './assets/scss/styles.global.scss'; // Import the global scss files

// Polyfills
import './Polyfills';

if (process.env.NODE_ENV === 'production') {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Polyfills.ts 

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

Je n'utilise pas la CLI, mais un démarreur personnalisé. J'ai inclus tous les mêmes polyfill que Angular-CLI, donc il ne m'en manque aucun. 

Est-ce que quelqu'un voit ce que je fais mal?

Mettre à jour

J'ai simplifié le scénario de test et remarqué que ce n'est pas le module de traduction. Même si je crée un service simple, je ne peux pas utiliser l'injection de dépendance. L'ajout du service à la liste providers ne fonctionne pas non plus (et ne devrait pas non plus être nécessaire, car j'utilise le paramètre angulaire 6 'provideIn: root').

angulartypescriptdependency-injectionangular6ngx-translate
9
Mr.wiseguy

assurez-vous que vous avez suivi l'importation dans polyfills
import 'core-js/es7/reflect';

15
Jignesh Shah

@Inject a fait le tour pour moi

import {Component, Inject} from '@angular/core';
import {TestService} from "./TestService";

@Component({
  selector: 'sh-home',
  styleUrls: ['./home.scss'],
  templateUrl: './home.html'
})
export class HomeComponent {

  constructor(@Inject(TestService) testService: TestService) {
    testService.sayHello();
  }
}
1
Isabel

J'ai résolu cette erreur en redémarrant simplement l'application. reconstruisez-le et lancez-le, ça marche très bien pour moi. S'il vous plaît vérifier et dites-moi.

Merci :)

1
Unknown_Coder

Vous pouvez essayer d'apporter les modifications ci-dessous:

import {Component} from '@angular/core';
import {TestService} from "./TestService";

@Component({
  selector: 'sh-home',
  styleUrls: ['./home.scss'],
  templateUrl: './home.html',
  viewProviders: [TestService]
})
export class HomeComponent {
   constructor(private testService: TestService) {
     this.testService.sayHello();
   }
}

viewProviders crée un injecteur spécial qui résout les dépendances uniquement pour ce composant.

0
upex