个人中心
gpt4 book ai didi

javascript - 将 Angular Web 应用程序连接到 Firebase

转载 作者：太空宇宙 更新时间：2023-11-03 22:27:26 26 4
gpt4 key购买 nike

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

发生错误:响应 app/hero.service.js:57错误错误:node_modules/@angular/core/bundles/core.umd.js:1091未捕获( promise ):响应状态:404 未找到 URL: https://my firebase 数据库名称/.json

这是我的代码:仪表板组件:

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

最佳答案

尝试更新网址heroesUrl = "https://tour-of-heroes-bcc7b.firebaseio.com/.json"。

关于javascript - 将 Angular Web 应用程序连接到 Firebase，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43699859/

26 4 0
文章推荐： php - 如何在 aws lambda 中将 imagick 与 php 一起使用？
文章推荐： c# - 如何在类(class)内共享 IDisposable 资源？
文章推荐： c# - 如何在 linq 类(表)中添加另一个带参数的构造函数
文章推荐： node.js - 无法在 Windows 10 中安装 Electron
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com