Angular 4 Routing with a Service

Question

I am getting an error when I connect my Angular 4 and REST application with a service.

Below is the error:

compiler.es5.js:1694 Uncaught Error: Can't resolve all parameters for TypeaheadComponent: (?, [object Object], [object Object]).
    at syntaxError (compiler.es5.js:1694)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15781)
    at CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15649)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.es5.js:15244)
    at CompileMetadataResolver._getEntryComponentMetadata (compiler.es5.js:15903)
    at eval (compiler.es5.js:15889)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getEntryComponentsFromProvider (compiler.es5.js:15888)
    at eval (compiler.es5.js:15852)
    at Array.forEach (<anonymous>)

I have checked and double-checked my router setup for any errors, but can't seem to find any myself. Any suggestions are appreciated.

Here is my app-routing.module.ts code:

import {Routes, RouterModule } from '@angular/router';
import {NgModule} from '@angular/core';
import {TypeaheadComponent} from "./shared/typeahead-component";
import {DashboardService} from "./services/dashboard-service";

const routes: Routes = [
    {  path: 'typeahead-component/', component: TypeaheadComponent }
]

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true } )],
    exports: [RouterModule],
    providers: [DashboardService]
})

export class AppRoutingModule {

}

Here is my app.module.ts code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent} from './app.component';
import { AppRoutingModule} from './app-routing.module';
import {RouterModule, Routes} from '@angular/router';
import { TypeaheadComponent } from './shared/typeahead-component';
import { HttpModule} from'@angular/http';
import {DashboardService} from "./services/dashboard-service";



@NgModule({
  declarations: [
    AppComponent,
    TypeaheadComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    RouterModule,
      HttpModule
  ],
  providers: [ RouterModule, DashboardService],
  bootstrap: [AppComponent],
})
export class AppModule { }

Here is my typeahead-component.ts relevant code:

  constructor( private route: Route, private router: Router, private dashboardHttpService: DashboardService) {
      this.router.navigate(['typeahead-component/']);
      this.edit();
  }

Here is my dashboard-service.ts relevant code:

constructor(private http: Http, private route: ActivatedRoute, private router: Router) {
    this.router.navigate(['typeahead-component/']);
  }

Also, my emitDecoratorMetadata in tsconfig.app.json, tsconfig.spec.json, and tsconfig.json are all set to true.

Apologies in advance- I did not create a plunkr for this because I am very new to working with plunkr.

I would greatly appreciate any working examples of what I am trying to implement.

Thank you!

Answer 1

in components, constructor parameters can ONLY be injectable services, which Route is not. If you need the current route, inject ActivatedRoute like you did in your dash component:

constructor( private route: ActivatedRoute, private router: Router, private dashboardHttpService: DashboardService)