CODEWITHSUNDEEP
angular
Kenzo_Gilead
Kenzo_Gilead

Reputation: 2439

EXCEPTION: UnCaught (in Promise). Injectioned Service in Angular 2

I can´t render an angular´s component, and I can´t figure it out.

It is something related with the method which is calling a services for injecting data. It is returning the error´s message below:

EXCEPTION: UnCaught (in Promise)

This is my relevant code:

cartelera-list.component.ts

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

import { CarteleraService } from './cartelera.service';
import { Pelicula } from './pelicula.model';

@Component({
  selector: 'cartelera-list',
  template: `
  <ul>
    <li *ngFor="let pelicula of cartelera"> 
        <p>+++ {{ pelicula.titulo }} - {{ pelicula.genero }} - {{ pelicula.duracion }} </p>
    </li>
  </ul>
  `,
  providers: [CarteleraService]
})

    export class CarteleraListComponent implements OnInit {

    public cartelera: Pelicula[];

    contructor(private carteleraService: CarteleraService) {}

    getPeliculas(): void {
        this.carteleraService.getPeliculas().then((cartelera: Pelicula[]) => this.cartelera = cartelera);
    }

    ngOnInit(): void {
        this.getPeliculas();
    }

}

cartelera.service.ts

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

import { Pelicula } from './pelicula.model';
import { CARTELERA } from './pelicula-data';

@Injectable()
export class CarteleraService {
    getPeliculas(): Promise<Pelicula[]> {
        return Promise.resolve(CARTELERA);
    }
}

The param CARTELERA, returned by the service, is just a const compound by a list of Pelicula (interface - model).

Note: The complet message´s error is :

EXCEPTION: UnCaught (in Promise) Cannot read property 'getPeliculas' of undefined error.

Note: I tried this sentence before

contructor(private carteleraService: CarteleraService) {}

But, when I used it, the next error appear, in compile time.

Error

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 { routing } from './app.routing';

import { SociosComponent } from './socios.component';
import { Index } from './index';
import { CarteleraComponent } from './cartelera.component';
import { CarteleraListComponent } from './cartelera-list.component';


@NgModule({
  imports:      [ 
    BrowserModule,
    FormsModule,
    routing    
  ],
  declarations: [ 
    AppComponent,
    SociosComponent,
    Index,
    CarteleraComponent,
    CarteleraListComponent
  ],
  bootstrap:    [ AppComponent ]
})

export class AppModule {}

Upvotes: 0

Views: 1272

Answers (3)

AVJT82
AVJT82

Reputation: 73357

Echonax was almost correct. Besides the changes echonax suggested you have a typo:

contructor(private carteleraService: CarteleraService) {}

should be constructor, so you were missing s.

As a sidenote, I would remove the providers: [CarteleraService] from your cartelera-list.component, and declare it in your NgModule as providers:

providers: [CarteleraService]

that makes the service available in the whole module, so you do not need to import and declare it in all components that you need. Just a suggestion! ;)

Upvotes: 1

candidJ
candidJ

Reputation: 4359

try using following way to manually write a promise

@Injectable()
export class CarteleraService {
    getPeliculas(): Promise<Pelicula[]> {

return new Promise((resolve, reject) => {
    resolve(CARTELERA);
  });
 }
}

you are not defining promise in right way. try console logging getPeliculas method in service it self to verify

Upvotes: 1

eko
eko

Reputation: 40647

Change

private carteleraService: CarteleraService;

contructor(carteleraService) {}

with

contructor(private carteleraService: CarteleraService) {}

This way Angular DI will inject CarteleraService to your this.carteleraService

Upvotes: 1

Related Questions