타이핑이 Ionic 2 App 내에서 제공자를 찾을 수 없습니다.

Question

PouchDB 데이터베이스를 초기화하는 서비스를 만들고 서비스 구성 요소 중 다른 하나에서 서비스 및 메소드를 호출하려고합니다.

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

} 

이있을 수 있습니다 어떤 이유 :

여기

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


} 

가 다른 구성 요소에 대한 내 코드입니다 : 여기

[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 

이 서비스에 대한 내 코드입니다 :이 오류가 계속 사고? app.module.ts의 선언을 망칠려고했지만 아무 것도하지 않았습니다. 내 IDE가 'ProjectService'를 찾을 수 있다고 말하고 있으므로 문제가 없습니다. Typings 구성 또는 그 안에 뭔가를 제공해야합니까?

미리 도움을 주셔서 감사합니다.

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

그냥

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

해야한다 :

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

Answer 1

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

가져 오기에 사용 된 경로가 올바른지 가정하면, 가져 오기 문장에서 .ts을 제거하여 시도

또한 @Aravind sai와 비슷합니다. d, 구성 요소 내부에 providers을 사용하지 마십시오.

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

Answer 3

그것의 당신이 서비스를 인스턴스화되지 않기 때문에 대신 NgModule에서 하나를 사용하십시오.

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 4

내 문제가 있습니다. 가져온 파일의 경로가 잘못되었습니다. 그러니 가볍게 침이 올바른지 확인하십시오.