Error: Can't resolve all parameters for HomeComponent: (?)

Question

I am using Meteor with Angular. Somehow, it always gives me the error whenever i tried to put the Router dependency in the component's constructor.

constructor(private router: Router) {}

while removing the Router parameter works just fine!

constructor() {}

I am trying to navigate from one component to another component using this.router.navigate() in the component ts.

This is the error i got:

Error: Can't resolve all parameters for HomeComponent: (?).

Still new to angular, been trying to solve this for days! Appreciate if you can help this poor soul out!

HomeComponent

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'home-component',
  templateUrl: './home.component.html'
})

export class HomeComponent {

  constructor(private router: Router) {}

}

AppModule

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { HomeComponent } from '../components/home/home.component';
import { LoginComponent } from '../components/login/login.component';

import { MainPage } from '../pages/main/main';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    MainPage
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  entryComponents: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

AppRoutingModule

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from '../components/home/home.component';
import { LoginComponent } from '../components/login/login.component';

const routes: Routes = [
{ 
    path: '', 
    redirectTo: '/home', 
    pathMatch: 'full' 
},
{ 
    path: 'home', 
    component: HomeComponent 
},
{ 
    path: 'login', 
    component: LoginComponent 
}
];

@NgModule({
  imports: [RouterModule.forRoot(routes 
{ enableTracing: false } // <-- debugging purposes only
)],
  exports: [RouterModule]
})

export class AppRoutingModule {}

Package.json

"dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@angular/animations": "^5.1.0",
"@angular/common": "^5.1.0",
"@angular/compiler": "^5.1.0",
"@angular/compiler-cli": "^5.1.0",
"@angular/core": "^5.1.0",
"@angular/forms": "^5.1.0",
"@angular/http": "^5.1.0",
"@angular/platform-browser": "^5.1.0",
"@angular/platform-browser-dynamic": "^5.1.0",
"@angular/platform-server": "^5.1.0",
"@angular/router": "^5.0.0",
"air-datepicker": "^2.2.3",
"babel-runtime": "^6.26.0",
"bcrypt": "^1.0.3",
"jarallax": "^1.9.3",
"jquery": "2.2.4",
"meteor-node-stubs": "^0.3.2",
"meteor-rxjs": "^0.4.8",
"moment": "^2.20.1",
"ngx-cookie": "^2.0.1",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.5.6",
"stripe": "^5.4.0",
"zone.js": "^0.8.19"
},

"devDependencies": {
"@types/meteor": "^1.4.12",
"@types/meteor-accounts-phone": "0.0.5",
"@types/underscore": "^1.8.6",
"meteor-typings": "^1.4.1",
"typescript": "^2.6.2"
}

This error usually happens from circular dependencies, but since you are importing from @angular/router it is a strange error to be getting...have you tried removing node_modules directory and doing an npm install again just to see if there was any issues with some corrupt modules? — Lansana Camara
@Lansana Hey, thanks for the advice! I tried and the same error is still there. Do you have any other ideas? — Violette N.
What happens if you add a declare const Router: any; to the top of your HomeComponent, and remove the @angular/router import? I suspect that something else may be importing that already, thus creating the circular import issue. I'm not sure if Meteor has any involvement with this error, but I imagine it does because you would never get that error with just Angular. Try that and let me know what happens. — Lansana Camara
@Lansana Just tried, same error :/ I am running with Meteor CLI, do you think it can be caused by the incorrect use of file structure? — Violette N.
@Lasana Yes, i guess u are right, was too spontaneous at getting it plugging all frameworks together! Thanks for the tips (: — Violette N.

funkizer funkizer · Accepted Answer · 2018-02-27T19:18:56

Weird. I don't see any problem in your code except a missing , in the forRoot call args. Can that be it? Would be weird indeed - if that isn't just a mistake in pasting your code here, by any sense you should have a compiler error instead, and your IDE crying warnings.

@NgModule({
  imports: [RouterModule.forRoot(routes // , missing here
{ enableTracing: false }
)],
  exports: [RouterModule]
})

Error: Can't resolve all parameters for HomeComponent: (?)

2 Answers