Блог

Я получаю сообщение об ошибке при добавлении службы в конструктор компонента. Ошибка «Не удается разрешить все параметры для RecordComponent». Есть идеи, почему добавление сервиса в конструктор вызывает эту ошибку?

Это мой сервис

 //record.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class RecordService {
    getPosts() {
       return 'Hello'; 
    }
}
  

Это компонент. Если я закомментирую параметр service в конструкторе, это сработает.

 //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);
    }
}
  

При необходимости я могу опубликовать свои app.component, main и app.module.

Редактировать:

Вот мой файл app.module

 //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 { }
  

и мой файл app.component

 //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 { }
  

и мой основной файл

 //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));
  

файл app.routing

 //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);
  

Полная ошибка, которую я вижу, заключается в следующем

 (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
  

1) Добавьте RecordService в провайдеры AppModule следующим образом-

 providers: [RecordService],
  

2) Импортируйте RouterModule в свойство imports AppModule следующим образом-

 imports:      [ BrowserModule, routing, HttpModule, RouterModule ],
  

3) Попробуйте изменить конструктор RecordComponent следующим образом-

 constructor( @Inject(RecordService) private recordService: RecordService, private router: Router) { 
  

Посмотрите, поможет ли это.