I've encountered an error when attempting to add a service to the constructor of a component. The specific error message I'm receiving is "Can't resolve all parameters for RecordComponent". Any insights into why adding the service to the constructor triggers this error?
Here's the service code snippet:
//record.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class RecordService {
getPosts() {
return 'Hello';
}
}
And below is the component code. Interestingly, if I omit the service parameter in the constructor, everything functions as expected.
//record.component.ts
import { Component, OnInit } from '@angular/core';
import { RecordService } from './record.service';
import { Router } from '@angular/router';
@Component({
selector: 'record-view',
template: '<h1>This is the record creation page</h1>'
})
export class RecordComponent implements OnInit {
message: string;
constructor(private recordService: RecordService, private router: Router) {
}
ngOnInit() {
this.message = this.recordService.getPosts();
console.log(this.message);
}
}
If needed, I can provide my app.component, main file, and app.module for further context.
EDIT:
Included below is my app.module file content:
//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { routing } from './app.routing';
import { AdminComponent } from './admin/admin.component';
import { RecordComponent } from './record/record.component';
import { RecordService } from './record/record.service';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
@NgModule({
imports: [ BrowserModule, routing, HttpModule ],
declarations: [ AppComponent, AdminComponent, RecordComponent ],
providers: [RecordService],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Additionally, here's my app.component file:
//app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Angular 2 App</h1>
<a routerLink="/admin">Admin</a>
<a routerLink="/record">Record</a>
<router-outlet></router-outlet> `
})
export class AppComponent { }
As well as my main file:
//main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.then(success => console.log(`Bootstrap success`))
.catch(error => console.log(error));
Lastly, the app.routing file:
//app.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { RecordComponent } from './record/record.component';
const appRoutes: Routes = [
{
path: 'admin',
component: AdminComponent
},
{
path: 'record',
component: RecordComponent
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
The complete error message that I'm facing reads as follows:
(index):19 Error: Error: Can't resolve all parameters for RecordComponent: (?, ?).
at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14381:21)
at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14282:28)
at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14057:30)
at eval (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14461:35)
at Array.forEach (native)
at CompileMetadataResolver._getEntryComponentsFromProvider (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14460:32)
at eval (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14418:85)
at Array.forEach (native)
at CompileMetadataResolver.getProvidersMetadata (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14405:21)
at eval (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14412:43)
Evaluating http://localhost:3000/public/app/main.js
Error loading http://localhost:3000/public/app/main.js