typescript - Angular 6 - kan inte lösa alla parametrar för AppComponent

Jag försöker bygga en applikation med Angular 6 och jag håller fortfarande på att ställa in allt. Men det verkar som att något är fel med beroendeinjektionen i min app.

Det kan inte lösa någon konstruktörsparameter. De resulterar alla i Uncaught Error: Can't resolve all parameters for AppComponent: (?).. Även en anpassad tjänst resulterar i samma fel.

Versioner (utelämnade beroenden som inte kan ha någon påverkan på detta)

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

Injektionen av TestService ger felet i det här fallet

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.

Jag använder inte CLI, utan en anpassad starter. Jag inkluderade alla samma polyfills som Angular-CLI gör, så jag saknar inga.

Ser någon vad jag gör fel?

Uppdatering

Jag har förenklat testfallet och märkt att det inte är översättningsmodulen. Även om jag skapar en enkel tjänst kan jag inte använda beroendeinjektion. Att lägga till tjänsten i providers-listan fungerar inte heller (och borde inte heller vara nödvändigt, eftersom jag använder Angular 6 'provideIn: root').

Svar #1

Se till att du har följande import i polyfills:

import 'core-js/es7/reflect';

Svar #2

Jag fick också detta problem men att sätta emitDecoratorMetadata": true i tsconfig löser problemet. Kom ihåg att starta om servern.

tsconfig.spec.json

   "compilerOptions": {
    "emitDecoratorMetadata": true,
     "outDir": "./out-tsc/spec",
   }

Relaterade artiklar