Typisierung kann Provider in Ionic 2 App nicht finden

Question

Ich habe einen Dienst erstellt, der eine PouchDB-Datenbank initialisiert und versucht, den Dienst und seine Methode in einer anderen meiner Komponenten aufzurufen. Ich erhalte diese Fehlermeldung:

[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 

Hier ist mein Code für den Dienst ist:

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's 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; 
    } 


} 

Hier ist mein Code für die andere Komponente ist:

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

} 

Gibt es Gründe, warum dies sein könnte Ereignis? Ich habe versucht, mit den Deklarationen in app.module.ts, aber das hat nichts getan. Meine IDE sagt mir, dass sie "ProjectService" finden kann, also gibt es dort kein Problem. Muss ich den Provider innerhalb einer Typings Config oder etwas deklarieren?

Vielen Dank für die Hilfe im Voraus!

Answer 1

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

Don't use providers inside components. Remove Provider from component and add only in app.module.ts

Answer 2

My IDE is telling me that it can locate 'ProjectService', so there is not an issue there. Do I have to declare the provider within a Typings config or something?

Unter der Annahme, dass der Weg in dem Import verwendete korrekt ist, versuchen Sie, indem Sie die .ts aus dem Import Satz zu entfernen:

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

sollte nur

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

seine

Und auch wie @Aravind Sai d, verwenden Sie nicht die providers Innenkomponenten; verwenden Sie den in NgModule statt:

@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 3

Sein, weil Sie den Dienst nicht sind instanziieren.

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

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

Dort sagen Sie nur, es gibt ein Objekt projectService mit einem Typ ProjectService, aber Sie erstellen es nicht. Sie können entweder den Konstruktor Argumente bewegen:

export class ProjectsPage { 
    public projects = []; 

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

oder im Konstruktor:

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

Die erste Option ist die beste, sollte der zweite nur dann verwendet werden, wenn Sie für eine warten Bedingung, bevor der Dienst instanziiert wird.

Answer 4

Ich habe mein Problem. Der Pfad für die importierte Datei war falsch! Überprüfe also, ob deine Wege stimmen.