Angular 6 - can't resolve all parameters for AppComponent

Question

I am trying to build an application with Angular 6 and I am still setting everything up. But it seems there is something wrong with the dependency injection in my app.

It cannot resolve any constructor parameter. They all result in Uncaught Error: Can't resolve all parameters for AppComponent: (?).. Even a custom service results in the same error.

Versions (omitted the dependencies that can't have any influence on this)

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

The injection of the TestService gives the error in this case

---

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.

I am not using the CLI, but a custom starter. I included all the same polyfills as Angular-CLI does, so I am not missing any.

Does anyone see what I am doing wrong?

---

Update

I've simplified the test case and noticed that it is not the translation module. Even if I create a simple service I cannot use dependency injection. Adding the service to the providers list doesn't work either (and also shouldn't be necessary, since I am using the Angular 6 'provideIn: root').

Isocline

have you added this service : TranslateService in app.module.ts under providers : [] ? – Kilmer

Tried, but no success :( – Isocline

what's is the error – Corespondent

Uncaught Error: Can't resolve all parameters for AppComponent: (?). – Isocline

Have you found a solution? I am having the exact same problem – Salangi

@steven.westside, I have given up on this problem. I stopped using the starter and switched to the CLI. So unfortunately no, I havn't found a solution to the problem. – Isocline

ok, thank you, this is really annoying.. – Salangi

@Isocline Did you fixed yet? I am having the same thing over here. It was working previously and now its not. Tell me how did you fix it? – Cady

@Robin, unfortunately I have to give you the same answer as I gave Steven, no solution yet. I switched to the CLI and gave up on my starter. – Isocline

Hello; Did u find a solution for this problem? – Yingling

duplicate of #47439724 – Rothko

Answer 1

Make sure you have following import in polyfills:

import 'core-js/es7/reflect';

Toscanini

I am importing 'core-js/es7/reflect' so I guess that can't be it :( – Isocline

Added import 'core-js/es7/reflect'; in test.ts and problem resolved for me. – Amphiarthrosis

nearly lost all my hair already, thx that worked fine for me :) – Kinglet

Answer 2

I also got this issue but setting emitDecoratorMetadata": true in tsconfig solve the issue. Remember to restart the server.

tsconfig.spec.json

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

Useful

Answer 3

I resolved this error by just restarting app. build it again and run it, it's works fine for me. Please check and tell me.

Thanks :)

Volumed

Yes it works thank you. But now this API gives CORS error how to fix this . webcollector-1.agora.io:6080/events/message?apiName=Client.join – Leveller

Use below lines in your .htaccess Header set Access-Control-Allow-Origin 'localhost:4200' Header always set Access-Control-Allow-Methods "POST, GET, DELETE, PUT" Header always set Access-Control-Allow-Headers "*" – Volumed

Answer 4

GET / or compiler error can't resolve all parameters for ApplicationModule: (?).

Just follow these simple steps :

1. Install core-js modeule.

npm i core-js

2. In the polyfills.ts file add the import statement

import 'core-js/es7/reflect';

3. In main.ts file add the import statements

import 'core-js/es6/reflect';

import 'core-js/es7/reflect';

Wine

Answer 5

@Inject did the trick for me

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

Outroar

It may work, but according to the Angular docs (angular.io/guide/dependency-injection) this should be the same as just using constructor(testService: TestService) {}. So there must be something wrong with the Angular dependency injector. – Isocline

Answer 6

You could try making the below changes:

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 creates a special injector that resolves dependencies only for this component.

Jillion

But that would mean I will have to do that in every single component and with the Angular-cli I won't have to do that. So there is something I am missing.. – Isocline

Did u find a solution for this problem? – Yingling

Answer 7

I received the same error on Angular 8 app

Can't resolve all parameters for AppComponent: (?,?,?)

after changing 1 parameter type in the constructor().

I solved the problem by stop and restarting the app.

Estimate

Answer 8

I had the same issue with a component in Angular 8. The constructor had multiple services as parameters.

e.g.,

constructor(
  private router: Router,
  private fooService: FooService,
  private barService: BarService,
  private fubarService: FoobarService,
  private anotherService: AnotherService)
{}

Experimenting with @Inject(), some parameters will take it, but others will not. They will complain about the parameter type.

The common thing about FooService, BarService and FubarService was they were physically in the same directory. I created some subdirectories and put one service in each sub-directory -- and the compiler error went away.

A blog post said forwardRef worked for them. It did not work for me. However, their article provided insight into what might be going on.

Edited to add:

In two other cases, the above wouldn't work. In one case, changing the import of the service from full path (src/app/...) to relative path removed the compiler complaint (go figure). In the second case, adding @Inject(ServiceName) public service: ServiceName resolved the issue.

In all of the above cases, an Ionic 5 project that uses Angular had no compilation complaints. The Ionic project is using Angular 8.2.14. The Angular project is using 8.2.0 (defaults of the respective CLIs when I created the projects).

Looks like some bug is lurking somewhere...

Solace

Answer 9

I also experienced the same issue with Angular 8.2.13 + Typescript. Finally the trick was to use a @Inject('RefOnlyUsedForTesting'), even if the type is string.

export abstract class MyBaseClass {
  ....
  constructor(@Inject(ElementRef) elementRef: ElementRef,
          @Optional() @Inject('RefOnlyUsedForTesting') dep1: MyObject,
          @Optional() @Inject('RefOnlyUsedForTesting') dep2: string,
          @Optional() @Inject('RefOnlyUsedForTesting') dep3: string) {
  super();    
  ...
 }
}

Abrade

Answer 10

If you are using webpack and babel to build Angular, it is likely you are missing this babel plugin: babel-plugin-transform-typescript-metadata

Reorder

Answer 11

Adding these two lines in "main.ts" solved the problem for me:

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

Pessimist