类型'ProvidersAppserviceProvider'（离子3）上不存在Typescript错误属性'list'已解决

问题描述：

我尝试使用带有离子3和角度4的CRUD时出现了一些错误。我正在使用Firebase。我的CLI也抛出的错误“未使用的导入：‘AngularFireDatabase’”和“*属性‘列表’不上键入‘FirebaseListObservable’存在'*”类型'ProvidersAppserviceProvider'（离子3）上不存在Typescript错误属性'list'已解决

我做了什么错？

错误

Runtime Error 
Uncaught (in promise): Error: No provider for FirebaseListObservable! Error: No provider for FirebaseListObservable! at injectionError (http://localhost:8100/build/main.js:1509:86) at noProviderError (http://localhost:8100/build/main.js:1547:12) at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3048:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3087:25) at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3019:25) at ReflectiveInjector_.get (http://localhost:8100/build/main.js:2888:21) at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:261:149) at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:396:67) at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3855:44) at resolveDep (http://localhost:8100/build/main.js:11317:45) 
Stack 
Error: Uncaught (in promise): Error: No provider for FirebaseListObservable! 
Error: No provider for FirebaseListObservable! 
    at injectionError (http://localhost:8100/build/main.js:1509:86) 
    at noProviderError (http://localhost:8100/build/main.js:1547:12) 
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3048:19) 
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3087:25) 
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3019:25) 
    at ReflectiveInjector_.get (http://localhost:8100/build/main.js:2888:21) 
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:261:149) 
    at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:396:67) 
    at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3855:44) 
    at resolveDep (http://localhost:8100/build/main.js:11317:45) 
    at c (http://localhost:8100/build/polyfills.js:3:13535) 
    at Object.reject (http://localhost:8100/build/polyfills.js:3:12891) 
    at Tab.NavControllerBase._fireError (http://localhost:8100/build/main.js:44060:16) 
    at Tab.NavControllerBase._failed (http://localhost:8100/build/main.js:44048:14) 
    at http://localhost:8100/build/main.js:44103:59 
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283) 
    at Object.onInvoke (http://localhost:8100/build/main.js:4427:37) 
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9223) 
    at r.run (http://localhost:8100/build/polyfills.js:3:4452) 
    at http://localhost:8100/build/polyfills.js:3:14076 
Typescript Error 
Property 'list' does not exist on type 'FirebaseListObservable<any[]>'. 
...elopment/ionic/newapp/src/providers/providers-appservice/providers-appservice.ts 
getDataItems(): FirebaseListObservable<any> { 
    return this.pap.list('/dataItems/'); 
} 
Typescript Error 
Property 'list' does not exist on type 'FirebaseListObservable<any[]>'. 
...elopment/ionic/newapp/src/providers/providers-appservice/providers-appservice.ts 
addItem(name) { 
    this.pap.list('/dataItems/').push(name); 
} 
Typescript Error 
Property 'list' does not exist on type 'FirebaseListObservable<any[]>'. 
...elopment/ionic/newapp/src/providers/providers-appservice/providers-appservice.ts 
remItem(id) { 
    this.pap.list('/dataItems/').remove(id); 
} 
Ionic Framework: 3.4.2 
Ionic App Scripts: 1.3.7 
Angular Core: 4.1.3 
Angular Compiler CLI: 4.1.3 
Node: 6.11.0 
OS Platform: Windows 10 
Navigator Platform: Win32 
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (

这里是我的供应商

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; 
import { Injectable } from '@angular/core'; 
//import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 


/* 
    Generated class for the ProvidersAppserviceProvider provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular DI. 
*/ 
@Injectable() 
export class ProvidersAppserviceProvider { 



    constructor(public pap: FirebaseListObservable<any[]>) { 
    console.log('Hello ProvidersAppserviceProvider Provider'); 
    } 



    getDataItems(): FirebaseListObservable<any> { 
    return this.pap.list('/dataItems/'); 
    } 

    addItem(name) { 
    this.pap.list('/dataItems/').push(name); 
    } 

    remItem(id) { 
    this.pap.list('/dataItems/').remove(id); 
    } 

}

我Home.ts

import { FirebaseListObservable } from 'angularfire2/database'; 
import { ProvidersAppserviceProvider } from './../../providers/providers-appservice/providers-appservice'; 
import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 


@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    dataItems: FirebaseListObservable<any[]>; 
    newItem = ''; 

    constructor(public navCtrl: NavController, public pap: ProvidersAppserviceProvider){ 
    this.dataItems = this.pap.getDataItems(); 

    } 

    addItem() { 
    this.pap.addItem(this.newItem); 
    } 

    remItem(id) { 
    this.pap.remItem(id); 
    } 

}

我app.module

import { ProvidersAppserviceProvider } from './../providers/providers-appservice/providers-appservice'; 
import { NgModule, ErrorHandler } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { HttpModule } from '@angular/http'; 

import { AboutPage } from '../pages/about/about'; 
import { ContactPage } from '../pages/contact/contact'; 
import { HomePage } from '../pages/home/home'; 
import { TabsPage } from '../pages/tabs/tabs'; 

import { StatusBar } from '@ionic-native/status-bar'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { AngularFireModule } from "angularfire2"; 
import { AngularFireDatabaseModule } from "angularfire2/database"; 



const fbConfig ={ 
    apiKey: "removed", 
    authDomain: "removed", 
    databaseURL: "removed", 
    projectId: "removed", 
    storageBucket: "removed", 
    messagingSenderId: "removed" 
} 

@NgModule({ 
    declarations: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    TabsPage 
    ], 
    imports: [ 
    BrowserModule, 
    IonicModule.forRoot(MyApp), 
    AngularFireDatabaseModule, 
    AngularFireModule.initializeApp(fbConfig), 
    HttpModule 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    TabsPage 
    ], 
    providers: [ 
    StatusBar, 
    SplashScreen, 
    {provide: ErrorHandler, useClass: IonicErrorHandler}, 
    ProvidersAppserviceProvider 
    ] 
}) 
export class AppModule {}

我感谢你的帮助。 .. 。。。。。。。。。。。

答

我认为你需要，而不是注入ProvidersAppserviceProvider，这将创造一个循环依赖，注入AngularFireDatabase

@Injectable() 
export class ProvidersAppserviceProvider { 

    constructor(public pap: AngularFireDatabase) { 
     console.log('Hello ProvidersAppserviceProvider Provider'); 
    } 

    getDataItems: FirebaseListObservable<any> { 
    return this.pap.list('/dataItems/'); 
    } 

}

注入FirebaseListObservable会抛出'ERROR错误：Uncaught（在promise中）：错误： FirebaseListObservable！' –

您需要导入导入AngularFireDatabaseModule，在app.module .ts – Sajeetharan

AngularFireDatabaseModule导入app.module –

答

这是打算？

@Injectable() 
export class ProvidersAppserviceProvider { 

    constructor(public pap: ProvidersAppserviceProvider) { 
     console.log('Hello ProvidersAppserviceProvider Provider'); 
    } 

    ... 

}

您正在注入相同的服务。这会导致你recursive injections，并会引发错误。

进样FirebaseListObservable而不是ProvidersAppserviceProvider

如何哑可我是错过。但是现在应用程序显示空白页面和CLI错误：未使用的导入：'FirebaseListObservable' 控制台错误'“未处理的Promise拒绝：提供程序解析错误：无法实例化循环依赖项ProvidersAppserviceProvider（”[ERROR - >]“）：in [email protected]:-1;区域：;任务：Promise.then;值：错误：提供程序分析错误：无法实例化循环依赖！ProvidersAppserviceProvider（“[ERROR - >]”）：in NgModule AppModule in ./[email protected]:-1“' @ Suren-Srapyan –

检查您的代码注入循环服务的位置 –

注入_'FirebaseListObservable'__抛出错误：_'Generic类型'FirebaseListObservable '需要1个类型参数（s）'_ –

答

纠正了我哑小姐出

我的供应商

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; 
import { Injectable } from '@angular/core'; 
//import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 


/* 
    Generated class for the ProvidersAppserviceProvider provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular DI. 
*/ 
@Injectable() 
export class ProvidersAppserviceProvider { 



    constructor(public pap: FirebaseListObservable<any[]>) { 
    console.log('Hello ProvidersAppserviceProvider Provider'); 
    } 



    getDataItems(): FirebaseListObservable<any> { 
    return this.pap.list('/dataItems/'); 
    } 

    addItem(name) { 
    this.pap.list('/dataItems/').push(name); 
    } 

    remItem(id) { 
    this.pap.list('/dataItems/').remove(id); 
    } 

}

我Home.ts

import { FirebaseListObservable } from 'angularfire2/database'; 
import { ProvidersAppserviceProvider } from './../../providers/providers-appservice/providers-appservice'; 
import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 


@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    dataItems: FirebaseListObservable<any[]>; 
    newItem = ''; 

    constructor(public navCtrl: NavController, public pap: ProvidersAppserviceProvider){ 
    this.dataItems = this.pap.getDataItems(); 

    } 

    addItem() { 
    this.pap.addItem(this.newItem); 
    } 

    remItem(id) { 
    this.pap.remItem(id); 
    } 

}

我的应用程序。模块

import { ProvidersAppserviceProvider } from './../providers/providers-appservice/providers-appservice'; 
import { NgModule, ErrorHandler } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { HttpModule } from '@angular/http'; 

import { AboutPage } from '../pages/about/about'; 
import { ContactPage } from '../pages/contact/contact'; 
import { HomePage } from '../pages/home/home'; 
import { TabsPage } from '../pages/tabs/tabs'; 

import { StatusBar } from '@ionic-native/status-bar'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { AngularFireModule } from "angularfire2"; 
import { AngularFireDatabaseModule } from "angularfire2/database"; 



const fbConfig ={ 
    apiKey: "removed", 
    authDomain: "removed", 
    databaseURL: "removed", 
    projectId: "removed", 
    storageBucket: "removed", 
    messagingSenderId: "removed" 
} 

@NgModule({ 
    declarations: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    TabsPage 
    ], 
    imports: [ 
    BrowserModule, 
    IonicModule.forRoot(MyApp), 
    AngularFireDatabaseModule, 
    AngularFireModule.initializeApp(fbConfig), 
    HttpModule 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    TabsPage 
    ], 
    providers: [ 
    StatusBar, 
    SplashScreen, 
    {provide: ErrorHandler, useClass: IonicErrorHandler}, 
    ProvidersAppserviceProvider 
    ] 
}) 
export class AppModule {}

错误

Runtime Error 
Uncaught (in promise): Error: No provider for FirebaseListObservable! Error: No provider for FirebaseListObservable! at injectionError (http://localhost:8100/build/main.js:1509:86) at noProviderError (http://localhost:8100/build/main.js:1547:12) at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3048:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3087:25) at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3019:25) at ReflectiveInjector_.get (http://localhost:8100/build/main.js:2888:21) at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:261:149) at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:396:67) at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3855:44) at resolveDep (http://localhost:8100/build/main.js:11317:45) 
Stack 
Error: Uncaught (in promise): Error: No provider for FirebaseListObservable! 
Error: No provider for FirebaseListObservable! 
    at injectionError (http://localhost:8100/build/main.js:1509:86) 
    at noProviderError (http://localhost:8100/build/main.js:1547:12) 
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3048:19) 
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3087:25) 
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3019:25) 
    at ReflectiveInjector_.get (http://localhost:8100/build/main.js:2888:21) 
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:261:149) 
    at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:396:67) 
    at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3855:44) 
    at resolveDep (http://localhost:8100/build/main.js:11317:45) 
    at c (http://localhost:8100/build/polyfills.js:3:13535) 
    at Object.reject (http://localhost:8100/build/polyfills.js:3:12891) 
    at Tab.NavControllerBase._fireError (http://localhost:8100/build/main.js:44060:16) 
    at Tab.NavControllerBase._failed (http://localhost:8100/build/main.js:44048:14) 
    at http://localhost:8100/build/main.js:44103:59 
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283) 
    at Object.onInvoke (http://localhost:8100/build/main.js:4427:37) 
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9223) 
    at r.run (http://localhost:8100/build/polyfills.js:3:4452) 
    at http://localhost:8100/build/polyfills.js:3:14076 
Typescript Error 
Property 'list' does not exist on type 'FirebaseListObservable<any[]>'. 
...elopment/ionic/newapp/src/providers/providers-appservice/providers-appservice.ts 
getDataItems(): FirebaseListObservable<any> { 
    return this.pap.list('/dataItems/'); 
} 
Typescript Error 
Property 'list' does not exist on type 'FirebaseListObservable<any[]>'. 
...elopment/ionic/newapp/src/providers/providers-appservice/providers-appservice.ts 
addItem(name) { 
    this.pap.list('/dataItems/').push(name); 
} 
Typescript Error 
Property 'list' does not exist on type 'FirebaseListObservable<any[]>'. 
...elopment/ionic/newapp/src/providers/providers-appservice/providers-appservice.ts 
remItem(id) { 
    this.pap.list('/dataItems/').remove(id); 
} 
Ionic Framework: 3.4.2 
Ionic App Scripts: 1.3.7 
Angular Core: 4.1.3 
Angular Compiler CLI: 4.1.3 
Node: 6.11.0 
OS Platform: Windows 10 
Navigator Platform: Win32 
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (

类型'ProvidersAppserviceProvider'（离子3）上不存在Typescript错误属性'list'已解决

相关推荐