Types cannot find provider in Ionic 2 app

Question

I created a service that initializes the PouchDB database, and am trying to call the service and its method in another of my components. I keep getting this error:

    [23:43:34]  Error: Error at /Users/Brad/IonicApps/CMTAv2/.tmp/pages/projects/projects.ts:24:27 
[23:43:34]  Cannot find name 'ProjectService'. 
[23:43:34]  ngc failed 
[23:43:34]  ionic-app-script task: "build" 
[23:43:34]  Error: Error 

Here is my code for the service:

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

/*
  Generated class for the ProjectService provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/

let PouchDB = require('pouchdb');

@Injectable()
export class ProjectService {
  private _db;
  private _projects;

  constructor(public http: Http) {
    console.log('Hello ProjectService Provider');
  }

  initDB() {
    this._db = new PouchDB('Projects', { adapter: 'websql' });
  }

  add(project) {
    return this._db.post(project);
  }

  delete(project) {
    return this._db.remove(project);
  }

  getAll() {

    if (!this._projects) {
      return this._db.allDocs({ include_docs: true})
          .then(docs => {

            // Each row has a .doc object and we just want to send an
            // array of birthday objects back to the calling controller,
            // so let map the array to contain just the .doc objects.

            this._projects = docs.rows.map(row => {
              // Dates are not automatically converted from a string.
              row.doc.Date = new Date(row.doc.Date);
              return row.doc;
            });

            // Listen for changes on the database.
            this._db.changes({ live: true, since: 'now', include_docs: true})
                .on('change', this.onDatabaseChange);

            return this._projects;
          });
    } else {
      // Return cached data as a promise
      return this._projects;
    }
  }

  private onDatabaseChange = (change) => {
    var index = this.findIndex(this._projects, change.id);
    var project = this._projects[index];

    if (change.deleted) {
      if (project) {
        this._projects.splice(index, 1); // delete
      }
    } else {
      change.doc.Date = new Date(change.doc.Date);
      if (project && project._id === change.id) {
        this._projects[index] = change.doc; // update
      } else {
        this._projects.splice(index, 0, change.doc) // insert
      }
    }
  }

  // Binary search, the array is by default sorted by _id.
  private findIndex(array, id) {
    var low = 0, high = array.length, mid;
    while (low < high) {
      mid = (low + high) >>> 1;
      array[mid]._id < id ? low = mid + 1 : high = mid
    }
    return low;
  }


}

Here is my code for another component:

    import {Component, NgZone} from '@angular/core';
import {NavController, ModalController} from 'ionic-angular';
import { ReportsPage } from '../reports/reports';
import { ProjectDetailPage } from '../project-detail/project-detail';
import { ProjectService } from  '../../providers/project-service.ts';
import { Platform } from 'ionic-angular';

/*
  Generated class for the Projects page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/



@Component({
  selector: 'page-projects',
  templateUrl: 'projects.html',
  providers: [ProjectService]
})
export class ProjectsPage {
  public projects = [];
  private projectService: ProjectService;

  constructor(public navCtrl: NavController,
              public modalCtrl: ModalController,
              private platform: Platform,
              private zone: NgZone) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.projectService.initDB();
      this.projectService.getAll()
          .then(data => {
            this.zone.run(() => {
              this.projects = data;
            });
          })
          .catch(console.error.bind(console));
    });

  }

  ionViewDidLoad() {
    console.log('Hello Projects Page');

  }

  public addProject() {
    let modal = this.modalCtrl.create(ProjectDetailPage);
    modal.present();
  }

  public openProject(project) {
    this.navCtrl.push(ReportsPage);
  }

}

Any reason why this could happen? I tried messing with the ads in app.module.ts, but it did nothing. My IDE tells me that it can find "ProjectService", so there is no problem there. Do I have to declare a provider in the Type config or something like that?

Thanks for the help in advance!

Answer 1

, .

export class ProjectsPage {
  public projects = [];
  private projectService: ProjectService;

  constructor(public navCtrl: NavController,
              public modalCtrl: ModalController,
              private platform: Platform,
              private zone: NgZone) {

, projectService ProjectService, . :

export class ProjectsPage {
  public projects = [];

  constructor(public navCtrl: NavController,
              public modalCtrl: ModalController,
              private projectService: ProjectService;
              private platform: Platform,
              private zone: NgZone) {

:

this.projectService = new ProjectService(this.http); <-- Need to add http to your constructor arguments.

, , .

Answer 2

@Component({
  selector: 'page-projects',
  templateUrl: 'projects.html',
  providers: [ProjectService]
})

. app.module.ts

Answer 3

IDE , "ProjectService", . config -?

, , , , .ts :

import { ProjectService } from  '../../providers/project-service.ts';

import { ProjectService } from  '../../providers/project-service';

, @Aravind , providers ; NgModule:

@NgModule({
  declarations: [
    MyApp,

    // Pages
    Page1,
    Page2,

    // Pipes
    MyCustomPipe,

    // Directives
    MyCustomDirective,
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,

    // Pages
    Page1,
    Page2
  ],
  providers: [ ProjectService, ... ] // <- here!
})
export class AppModule {}

Answer 4

I have a problem. The path to the imported file was incorrect! Therefore, check the correctness of your corrections.