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.

Answer 1

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

Answer 2

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';

Answer 3

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.

Answer 4

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