Getting Uncaught Error: Can't resolve all parameters for

Question

I am new in angular 4, I am getting an error while compiling like

Uncaught Error: Can't resolve all parameters for AllCountryComponent: ([object Object], [object Object], ?). at syntaxError (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:707) at CompileMetadataResolver._getDependenciesMetadata (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:15927) at CompileMetadataResolver._getTypeMetadata (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:15762)

I have attached a screenshot of the error also:

---

my allCountry.component.ts code are below

import { Component, OnInit } from '@angular/core';
import { AppService } from '../../app.service';
import { ActivatedRoute, Route } from '@angular/router';
import {Location} from '@angular/common'

@Component({
  selector: 'app-all-country',
  templateUrl: './all-country.component.html',
  styleUrls: ['./all-country.component.css'],
  providers: [Location,AppService]
})
export class AllCountryComponent implements OnInit {
   public name:string;
   public value:string;
   public listCountry:any[];
  constructor(private http:AppService,private _route:ActivatedRoute ,_rout:Route ) {
              console.log("allcountry constuctor are called");
   }

  ngOnInit() {
    this.name=this._route.snapshot.paramMap.get('name');
    this.value=this._route.snapshot.paramMap.get('value');
   console.log(this.name);
   console.log(this.value);
   this.http.getAllCountry(this.name,this.value).subscribe(
     data=>{
       this.listCountry=data;
       console.log(this.listCountry)
     },
    error=>{
      console.log("error occured")
      console.log(error.errorMessege)
    }
   )


  }

}

app.service.ts

import { Injectable } from '@angular/core';
import { HttpClient  } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/toPromise';
import { ApiFormat } from './api-format';

@Injectable()
export class AppService implements ApiFormat {
  public allRegion=[];
  public name:string;
   public value:string;


    public baseUrl="https://restcountries.eu/rest/v2";
  constructor(private http:HttpClient) {
    console.log("service are called");
   }

  public getAllCountry(name:string,value:string):Observable<any>{
       let myResponse = this.http.get(`${this.baseUrl}/${name}/${value}?fields=name;region;capital;currencies;subregion;timezones;population;languages;flag`);
              return myResponse;   
   }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }          from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { AppService } from './app.service';
import { SharedModule } from './shared/shared.module';
import { CountryModule } from './country/country.module';
import { HomeComponent } from './home/home.component';
import { AllCountryComponent } from './country/all-country/all-country.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AllCountryComponent

  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    SharedModule,
    CountryModule,
    RouterModule.forRoot([
      {path:"home",component:HomeComponent},
      {path:" ",redirectTo:"home",pathMatch:"full"},
      {path:'*',component:HomeComponent},
      {path:'**',component:HomeComponent},
      {path:"allcountry/:name/:value",component:AllCountryComponent}

    ])
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }

country.module.ts are

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AllCountryComponent } from './all-country/all-country.component';
import { SigleCountryComponent } from './sigle-country/sigle-country.component';
import { FormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    FormsModule,
    RouterModule.forChild([
      {path:"allcountry/:name/:value",component:AllCountryComponent},
      {path:"country/:code",component:SigleCountryComponent}
    ])

  ],
  declarations: [AllCountryComponent, SigleCountryComponent]
})
export class CountryModule { }

Answer 1

The error in the image says

Can't resolve all parameters for AllCountryComponent: ([Object object], [Object object], ?)

Notice the ? it corresponds to the third argument in your component constructor

constructor(private http:AppService,private _route:ActivatedRoute ,_rout:Route ) {
    console.log("allcountry constuctor are called");
}

It's not clear why you have the third paramter _rout, plus it's not a class member (since it doesn't have a access specifier) and you haven't used it anywhere.

Route cannot be provided by Angular via DI. Remove the third parameter and it should probably work fine.

constructor(private http:AppService,private _route:ActivatedRoute) {
    console.log("allcountry constuctor are called");
}