Encountering an issue while connecting my Angular 4 and REST application with a service.
Here's the error message:
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>)
The router setup has been meticulously reviewed for any errors, but none have been identified so far. Any suggestions would be helpful.
Below is the code from my app-routing.module.ts:
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 {
}
And here is my app.module.ts:
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 { }
Looking into the relevant code in typeahead-component.ts:
constructor( private route: Route, private router: Router, private dashboardHttpService: DashboardService) {
this.router.navigate(['typeahead-component/']);
this.edit();
}
As well as the dashboard-service.ts related code:
constructor(private http: Http, private route: ActivatedRoute, private router: Router) {
this.router.navigate(['typeahead-component/']);
}
Additionally, ensure that the emitDecoratorMetadata in tsconfig.app.json, tsconfig.spec.json, and tsconfig.json are set to true.
Regretfully, no plunkr was created due to lack of familiarity, so any functional examples would be greatly appreciated.
Your assistance is valued!