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').

have you added this service : ``TranslateService`` in app.module.ts under ``providers : []`` ? — CruelEngine, Jun 21 '18 at 10:06
Uncaught Error: Can't resolve all parameters for AppComponent: (?). — Mr.wiseguy, Jun 21 '18 at 10:18
Have you found a solution? I am having the exact same problem — steven.westside, Jul 18 '18 at 21:41
@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. — Mr.wiseguy, Jul 19 '18 at 06:56
@Mr.wiseguy 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? — Robin, Aug 03 '18 at 11:18
@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. — Mr.wiseguy, Aug 03 '18 at 11:22
duplicate of https://stackoverflow.com/questions/47439224/cant-resolve-all-parameters-for-appcomponent — Snook, Aug 30 '19 at 12:07

score 30 · Answer 1 · edited Oct 17 '20 at 20:57

30

Make sure you have following import in polyfills:

import 'core-js/es7/reflect';

edited Oct 17 '20 at 20:57

Boolean Autocrat

347
2
16

answered Sep 04 '18 at 19:36

Jignesh Shah

351
4
10

I am importing `'core-js/es7/reflect'` so I guess that can't be it :( – Mr.wiseguy Sep 10 '18 at 11:55
1

Added `import 'core-js/es7/reflect';` in `test.ts` and problem resolved for me. – Manwal Jan 29 '19 at 10:20
nearly lost all my hair already, thx that worked fine for me :) – djnose May 30 '19 at 11:45

score 8 · Answer 2 · edited Feb 11 '21 at 14:24

8

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",
   }

edited Feb 11 '21 at 14:24

Hirusha Fernando

1,156
10
29

answered Dec 12 '19 at 13:16

ashish kumar

81
1
1

score 6 · Answer 3 · answered Oct 16 '18 at 08:47

6

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 :)

answered Oct 16 '18 at 08:47

Unknown_Coder

764
6
24

Yes it works thank you. But now this API gives CORS error how to fix this . *http://webcollector-1.agora.io:6080/events/message?apiName=Client.join* – Manish Patidar May 11 '21 at 14:56
Use below lines in your .htaccess Header set Access-Control-Allow-Origin 'http://localhost:4200' Header always set Access-Control-Allow-Methods "POST, GET, DELETE, PUT" Header always set Access-Control-Allow-Headers "*" – Unknown_Coder May 12 '21 at 17:15

score 3 · Answer 4 · answered Jul 25 '19 at 01:16

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

Just follow these simple steps :

Install core-js modeule.

npm i core-js

In the polyfills.ts file add the import statement

import 'core-js/es7/reflect';

In main.ts file add the import statements

import 'core-js/es6/reflect';

import 'core-js/es7/reflect';

score 2 · Answer 5 · answered Feb 01 '19 at 08:10

2

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

answered Feb 01 '19 at 08:10

Isabel

53
4

It may work, but according to the Angular docs (https://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. – Mr.wiseguy Feb 12 '19 at 13:03

score 0 · Answer 6 · answered Oct 09 '18 at 19:19

0

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.

answered Oct 09 '18 at 19:19

upex

1
1

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.. – Mr.wiseguy Oct 12 '18 at 09:22
Did u find a solution for this problem? – Adouani Riadh Apr 04 '19 at 20:03

score 0 · Answer 7 · answered Nov 15 '19 at 11:04

0

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.

answered Nov 15 '19 at 11:04

octavian09

139
1
3

jerry · Answer 8 · 2020-06-19T13:25:49.410

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...

score 0 · Answer 9 · answered Sep 01 '20 at 09:12

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

score 0 · Answer 10 · answered Nov 22 '20 at 19:53

0

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

answered Nov 22 '20 at 19:53

L's World

423
1
5
13

score 0 · Answer 11 · edited Apr 20 '23 at 11:46

0

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

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

edited Apr 20 '23 at 11:46

Storytellerr

642
3
18

answered Apr 16 '23 at 22:19

Wassim B'Kraiem

1
2

Angular 6 - can't resolve all parameters for AppComponent

11 Answers11

Linked