wake-up-neo.com

Winkel 6 - kann nicht alle Parameter für AppComponent auflösen

Ich versuche, eine Anwendung mit Angular 6 zu erstellen, und ich stelle immer noch alles auf. Es scheint jedoch, dass mit der Abhängigkeitsinjektion in meiner App etwas nicht stimmt. 

Es können keine Konstruktorparameter aufgelöst werden. Sie alle führen zu Uncaught Error: Can't resolve all parameters for AppComponent: (?).. Selbst ein benutzerdefinierter Service führt zu demselben Fehler. 

Versionen (die Abhängigkeiten weggelassen, die darauf keinen Einfluss haben können)

 "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();
  }
}

Die Injektion der TestService gibt den Fehler in diesem Fall


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.

Ich benutze nicht die CLI, sondern einen benutzerdefinierten Starter. Ich habe die gleichen Polyfills wie Angular-CLI verwendet, so dass ich keine vermisse. 

Weiß jemand, was ich falsch mache?


Update

Ich habe den Testfall vereinfacht und festgestellt, dass es sich nicht um das Übersetzungsmodul handelt. Selbst wenn ich einen einfachen Dienst erstelle, kann ich keine Abhängigkeitsinjektion verwenden. Das Hinzufügen des Dienstes zur providers-Liste funktioniert ebenfalls nicht (und sollte auch nicht erforderlich sein, da ich den Angular 6-Code provideIn: root 'verwende).

9
Mr.wiseguy

stellen Sie sicher, dass Sie den folgenden Import in Polyfills haben
import 'core-js/es7/reflect';

15
Jignesh Shah

GET / Oder Compilerfehler can't resolve all parameters for ApplicationModule: (?).

Befolgen Sie einfach diese einfachen Schritte:

  1. Installieren Sie core-js modeule.

npm i core-js

  1. Fügen Sie in der Datei polyfills.ts Die import-Anweisung hinzu

import 'core-js/es7/reflect';

  1. Fügen Sie in der Datei main.ts Die Importanweisungen hinzu

import 'core-js/es6/reflect';

import 'core-js/es7/reflect';

2

@Inject hat den Trick für mich gemacht

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

Ich habe diesen Fehler durch einen Neustart der App behoben. baue es erneut und führe es aus, es funktioniert gut für mich. Bitte überprüfen Sie und sagen Sie mir.

Vielen Dank :)

1
Unknown_Coder

Sie können versuchen, die folgenden Änderungen vorzunehmen:

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 erstellt einen speziellen Injektor, der nur Abhängigkeiten für diese Komponente auflöst.

0
upex