连接angularnetworking应用程序到firebase

我想将我的web应用程序连接到firebase,并且我有VPN,但运行后,我的仪表板组件不显示,并且出现一些错误:

发生错误:响应app / hero.service.js:57错误错误:node_modules/@angular/core/bundles/core.umd.js:1091未捕获(承诺中):状态响应:404未findURL: https ://我的 firebase数据库名称/.json

这是我的代码: DashboardComponent:

import { Component, OnInit } from '@angular/core'; import {Http} from '@angular/http'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @Component({ selector: 'my-dashboard', templateUrl: './dashboard.component.html', styleUrls: [ './dashboard.component.css' ] }) export class DashboardComponent implements OnInit { heroes: Hero[] = []; constructor(private heroService: HeroService) { } ngOnInit(): void { this.heroService.getHeroes() .then(heroes => this.heroes = heroes.slice(1, 5)); } } 

hero.service.ts

  import { Injectable } from '@angular/core'; import { Headers, Http } from '@angular/http'; import 'rxjs/add/operator/toPromise'; import { Hero } from './hero'; @Injectable() export class HeroService { private headers = new Headers({'Content-Type': 'application/json'}); private heroesUrl = private heroesUrl = "https://tour-of-heroes-bcc7b.firebaseio.com/.json"; // URL to web api constructor(private http: Http) { } getHeroes(): Promise<Hero[]> { return this.http.get(this.heroesUrl) .toPromise() .then(response => response.json().data as Hero[]) .catch(this.handleError); } getHero(id: number): Promise<Hero> { const url = `${this.heroesUrl}/${id}`; return this.http.get(url) .toPromise() .then(response => response.json().data as Hero) .catch(this.handleError); } delete(id: number): Promise<void> { const url = `${this.heroesUrl}/${id}`; return this.http.delete(url, {headers: this.headers}) .toPromise() .then(() => null) .catch(this.handleError); } create(name: string): Promise<Hero> { return this.http .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers}) .toPromise() .then(res => res.json().data as Hero) .catch(this.handleError); } update(hero: Hero): Promise<Hero> { const url = `${this.heroesUrl}/${hero.id}`; return this.http .put(url, JSON.stringify(hero), {headers: this.headers}) .toPromise() .then(() => hero) .catch(this.handleError); } private handleError(error: any): Promise<any> { console.error('An error occurred', error); // for demo purposes only return Promise.reject(error.message || error); } } 

的index.html

  <!DOCTYPE html> <html> <head> <base href="/"> <title>Angular Tour of Heroes</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('main.js').catch(function(err){ console.error(err); }); </script> <body> <my-app>Loading...</my-app> <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script> <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-database.js"></script> <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js"></script> <script> // Initialize Firebase var config = { apiKey: "my firebase project apikey", authDomain: "my firebase projec domain name", databaseURL: "my firebase projec database name", projectId: "my firebase projec ID", storageBucket: "my firebase projec storage", messagingSenderId: "my firebase projec senderId" }; firebase.initializeApp(config); </script> </head> </body> </html> 

app.module.ts

  import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppRoutingModule } from './app-routing.module'; // Imports for loading & configuring the in-memory web api import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; import { InMemoryDataService } from './in-memory-data.service'; import { AppComponent } from './app.component'; import { DashboardComponent } from './dashboard.component'; import { HeroesComponent } from './heroes.component'; import { HeroDetailComponent } from './hero-detail.component'; import { HeroService } from './hero.service'; import { HeroSearchComponent } from './hero-search.component'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, InMemoryWebApiModule.forRoot(InMemoryDataService), AppRoutingModule ], declarations: [ AppComponent, DashboardComponent, HeroDetailComponent, HeroesComponent, HeroSearchComponent ], providers: [ HeroService ], bootstrap: [ AppComponent ] }) export class AppModule { } 

尝试更新urlheroesUrl = "https://tour-of-heroes-bcc7b.firebaseio.com/.json"

首先,我看到你已经使用了InMemoryWebApi 。 你需要从你的NgModule删除下面一行,它会干扰你的“真实的”http请求。 所以从NgModule删除以下行:

 InMemoryWebApiModule.forRoot(InMemoryDataService) 

然后注意你的服务中的额外的private heroesUrl

 private heroesUrl = private heroesUrl = "https://tour-of-heroes-bcc7b.firebaseio.com/.json"; 

应该:

 private heroesUrl = "https://tour-of-heroes-bcc7b.firebaseio.com/.json"; 

接下来你的getHeroes函数在你的服务中。 你正在接收的JSON是一个数组,所以你的响应中没有对象data ,它将包含你正在寻找的数组,所以改变:

 .then(response => response.json().data as Hero[]) 

 .then(response => response.json() as Hero[]) 

我想我已经指出了错误(希望)。 这里有一点

演示


更新:

新的错误slice is not a function是由于你已经改变了请求的URL,所以数据改变了,现在我们不再处理一个数组,而是一个对象的对象。 因此,你需要创build一个循环,并提取每个对象,并推送他们到你的heroesarrays。 所以你的订阅会看起来像这样:

 this.heroService.getHeroes() .then(data => { // iterate the object and push each object from inside that object to your array for(let obj in data) { this.heroes.push(data[obj]) } console.log(this.heroes) this.heroes = this.heroes.slice(1, 5) }); 

演示