CODEWITHSUNDEEP
typescriptangular
Samson Quaye
Samson Quaye

Reputation: 1

TypeError: Cannot read property 'parameters' of undefined

I get the above mentioned error when I inject a service in component. When I removed the providers property from the component decorator it runs. Here are snippets of my code

ManufactureComponent.ts

import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { BaseLayoutComponent } from '../../shared/index';
import { ManufacturerService } from '../index'

@Component({
  moduleId: module.id,
  templateUrl: 'manufacturers.component.html',
  directives: [ROUTER_DIRECTIVES, BaseLayoutComponent]
})
export class ManufacturerComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

ManufacturerListComponent.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { ManufacturerService, IManufacturer } from '../index';
import { PageContainerComponent } from '../../shared/index';

@Component({
  moduleId: module.id,
  templateUrl: 'manufacturer-list.component.html',
  directives: [ROUTER_DIRECTIVES, PageContainerComponent],
  providers: [ManufacturerService]
})
export class ManufacturerListComponent implements OnInit {
 manufacturers: IManufacturer[];

 constructor(private manufacturerService: ManufacturerService) { }

 ngOnInit() { 
   this.getManufacturers();
 }

 getManufacturers() {
   this.manufacturerService.all()
     .subscribe(response => {this.manufacturers = response;}, 
     (error) =>  {console.log(error);})
}

}

ManufacturerService.ts

import { Injectable } from '@angular/core';
import { Response } from '@angular/http';
import { Observable } from 'rxjs/observable';
import { AuthHttp } from 'angular2-jwt';

import { Config } from '../../shared/index';
import { IManufacturer } from '../index';

@Injectable()
export class ManufacturerService {
  private baseUrl = `${Config.endpoint}/api/manufacturers`;

  constructor(private authHttp: AuthHttp) { }

  all(): Observable<IManufacturer[]> {
    return this.authHttp.get(this.baseUrl)
      .map(res => res.json());
  }

}

`

I've also ensured the dependencies are imported correctly.

Thanks

Upvotes: 0

Views: 2613

Answers (3)

x64vs32x
x64vs32x

Reputation: 173

It's maybe if your interdependent components located in one index.ts file...

Upvotes: 0

Samson Quaye
Samson Quaye

Reputation: 1

Doing further debugging, I found out that it had to be with the ManufacturerService and how it was imported into the ManufacturerListComponent. Doing a direct import worked for me.

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657138

You need to provide AuthHttp for example at the root component (or bootstrap())

Upvotes: 1

Related Questions