web-dev-qa-db-ja.com

Angular 6-AppComponentのすべてのパラメーターを解決できない

Angular 6でアプリケーションをビルドしようとしていますが、まだすべてをセットアップしています。しかし、アプリケーションの依存性注入に何か問題があるようです。

コンストラクターパラメーターを解決できません。これらはすべてUncaught Error: Can't resolve all parameters for AppComponent: (?).になります。カスタムサービスでも同じエラーが発生します。

バージョン（これに影響を与えない依存関係は省略）

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

この場合TestServiceを挿入するとエラーが発生します

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.

CLIではなく、カスタムスターターを使用しています。 Angular-CLIと同じポリフィルをすべて含めたので、見逃していません。

誰かが私が間違っていることを見ていますか？

更新

私はテストケースを単純化し、それが翻訳モジュールではないことに気付きました。単純なサービスを作成しても、依存関係の注入は使用できません。 providersリストへのサービスの追加も機能しません（また、Angular 6 'provideIn: root '）。

angulartypescriptdependency-injectionangular6ngx-translate
10
Mr.wiseguy

ポリフィルで次のインポートがあることを確認してください
import 'core-js/es7/reflect';

20
Jignesh Shah

アプリを再起動するだけでこのエラーを解決しました。もう一度ビルドして実行すると、うまくいきます。チェックして教えてください。

ありがとう：）

4
Unknown_Coder

_GET /_またはコンパイラエラーcan't resolve all parameters for ApplicationModule: (?).

次の簡単な手順に従ってください。

  1. Core-js modeuleをインストールします。

_npm i core-js_

  1. _polyfills.ts_ファイルにimportステートメントを追加します

_import 'core-js/es7/reflect';_

  1. _main.ts_ファイルにimportステートメントを追加します

_import 'core-js/es6/reflect';_

_import 'core-js/es7/reflect';_

2
Srilakshmy Krishnan

@Injectは私のためにトリックをしました

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

以下の変更を試すことができます。

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は、このコンポーネントの依存関係のみを解決する特別なインジェクターを作成します。

0
upex