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).
stellen Sie sicher, dass Sie den folgenden Import in Polyfills haben
import 'core-js/es7/reflect';
GET /
Oder Compilerfehler can't resolve all parameters for ApplicationModule: (?).
Befolgen Sie einfach diese einfachen Schritte:
npm i core-js
polyfills.ts
Die import-Anweisung hinzuimport 'core-js/es7/reflect';
main.ts
Die Importanweisungen hinzuimport 'core-js/es6/reflect';
import 'core-js/es7/reflect';
@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();
}
}
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 :)
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.