Ionic - Uncaught (in promise): Error: No provider for Subject!


#1

Hi,

I am new to ionic and using ionic 2.

Below is my bug. After trying for about 12 hours, I am not making any headway.

Uncaught (in promise): Error: No provider for Subject! 
Error: No provider for Subject! at injection
Error (http://localhost:8100/build/main.js:1728:86) at noProvider
Error (http://localhost:8100/build/main.js:1766:12) 
at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3267:19) 
at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3306:25) 
at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3238:25) 
at ReflectiveInjector_.get (http://localhost:8100/build/main.js:3107:21) 
at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:4054:52) 
at SpeakersModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:4054:52) 
at resolveDep (http://localhost:8100/build/main.js:11514:45) 
at createClass (http://localhost:8100/build/main.js:11370:91)

Ionic Framework: 3.3.0
Ionic App Scripts: 1.3.7
Angular Core: 4.1.2
Angular Compiler CLI: 4.1.2
Node: 7.9.0
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36

MY PROVIDER

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';

import { Subject } from '../../models/Subject';

@Injectable()
export class SubjectProvider {

  constructor(public http: Http, public subject: Subject) {
    console.log('Hello SubjectProvider Provider');
  }

  getSubjects(subject) {
    return this.http.get('/api/api/subject')
      .map(res => res.json());
  }
}

MY PAGE COMPONENT


import { Subject } from 'rxjs/Rx';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SubjectProvider } from '../../providers/subject/subject';


@IonicPage()
@Component({
  selector: 'page-speakers',
  templateUrl: 'speakers.html',
  providers: [SubjectProvider],
})
export class Speakers {
  items: any;
  subject:any;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private subjectProvider: SubjectProvider,) {

    }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Speakers');
  }

  getSubjects(subject) {
    this.subjectProvider.getSubjects(subject).subscribe(response => {
      console.log(response);
      this.items = response.data.children;
    })
  }

}

MODEL

import { S3File } from './S3File';
import { Role } from './Role';
import { Permission } from './Permission';

export class Subject{
    id:String;
    authToken:String;
    pushToken:String;
    emailAddress:String;
    password:String;
    firstName:String;
    lastName:String;
    creationDate:Date;
    picture:S3File;
    subjectRoles:Role[];
    subjectPermissions:Permission[];
    




    constructor(){

    }

    
}

Kindly help!!!

PS: My first post. All I am working with is an API.


#2

If you possibly can, I would strongly suggest renaming Subject so that it doesn’t clash with the RxJS class. Unless you are absolutely certain of what you are doing and why, do not put providers on components, only in your app module. That way you get app-wide singletons as is generally wanted. Give everything proper types instead of abusing any.

Now to the problem at hand. The constructor of SubjectProvider is asking the DI system to give it a Subject. I don’t know how that is supposed to be constructed, and neither does Angular. Maybe you can get some ideas of how you want to do things from the DI documentation.


#3

Thank you so much for the reply. I have taken note of the suggestion.

On the problem at hand, I have looked at the link you sent. I still have issues. Could you give a sample scenario? The whole idea is that I have an api, and I need to pull data from it. Subject MODEL is what the api data structure looks like. I need to create a SubjectProvider service (provider) and with it, display its content in the Speakers component. How would you get this done?

All I still keep seeing is

Uncaught (in promise): Error: No provider for Subject! 
Error: No provider for Subject! at injection

PS: All bold characters info can be found in OP.

Thank you for your help…


#4

I think u need to add @Injectable to your Subject class in order to inject it in your provider.


#5

That would likely fix the error, but isn’t the desired fix based on the context.

You need to remove public subject: Subject from the constructor of SubjectProvider. The constructor is for injecting providers and the like, and you don’t need to inject models/interfaces.


#6

I agree !! Just wanted to make @bayoishola20 aware of needing to define classes as @Injectable in order to inject them.


#7

Thank you so much, @neomib. You response did give me a good clue. I tried that. :thumbsup:

Thank you also, @rapropos. I eventually did that and saw the bug disappear. :thumbsup: