javascript - Firebase returns "appbad-app-name" in angularfire2 - Stack Overflow

admin管理员组

文章数量:1429953

In my Angular app Firebase returns an error which shows bad-app-name as code. i'm using angularfire2 in angular app.

I have double checked Firebase configuration, it is alright, so how to solve this error.

appponents.ts

import { Component, OnInit } from '@angular/core';
import { FormsModule, NgForm } from "@angular/forms";
import { AngularFireDatabase } from "angularfire2/database";
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.css']
})
export class AppComponent{
  isLoggedIn: boolean = false;
  courses: any[];
  constructor(public db: AngularFireDatabase) {
    db.list('/Courses').valueChanges().subscribe(courses => {
      this.courses = courses;
      console.log(this.courses);
    });
  }

  login() {
    this.isLoggedIn = !this.isLoggedIn;
  }
  user:any;
  saveData(formData) {
    if (formData.valid) {
      console.log(formData.value);
    }
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { AppRoutingModule } from './app-routing.module';

import { AngularFireModule } from "angularfire2";
import { AngularFireDatabaseModule } from "angularfire2/database";
import { AngularFireAuthModule } from "angularfire2/auth";

import { AppComponent } from './appponent';

export const firebaseConfig = {
  apiKey: "apikey",
  authDomain: "angular-f5fa9.firebaseapp",
  databaseURL: "",
  projectId: "angular-f5fa9",
  storageBucket: "angular-f5fa9.appspot",
  messagingSenderId: "592083773091"
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Console Error

FirebaseError {
code: "app/bad-app-name", 
message: "Firebase: Illegal App name: '[object Object] (app/bad-app-name).", 
name: "[object Object]", 
ngDebugContext: DebugContext_, 
ngErrorLogger: ƒ, …}

In my Angular app Firebase returns an error which shows bad-app-name as code. i'm using angularfire2 in angular app.

I have double checked Firebase configuration, it is alright, so how to solve this error.

app.ponents.ts

import { Component, OnInit } from '@angular/core';
import { FormsModule, NgForm } from "@angular/forms";
import { AngularFireDatabase } from "angularfire2/database";
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent{
  isLoggedIn: boolean = false;
  courses: any[];
  constructor(public db: AngularFireDatabase) {
    db.list('/Courses').valueChanges().subscribe(courses => {
      this.courses = courses;
      console.log(this.courses);
    });
  }

  login() {
    this.isLoggedIn = !this.isLoggedIn;
  }
  user:any;
  saveData(formData) {
    if (formData.valid) {
      console.log(formData.value);
    }
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { AppRoutingModule } from './app-routing.module';

import { AngularFireModule } from "angularfire2";
import { AngularFireDatabaseModule } from "angularfire2/database";
import { AngularFireAuthModule } from "angularfire2/auth";

import { AppComponent } from './app.ponent';

export const firebaseConfig = {
  apiKey: "apikey",
  authDomain: "angular-f5fa9.firebaseapp.",
  databaseURL: "https://angular-f5fa9.firebaseio.",
  projectId: "angular-f5fa9",
  storageBucket: "angular-f5fa9.appspot.",
  messagingSenderId: "592083773091"
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Console Error

FirebaseError {
code: "app/bad-app-name", 
message: "Firebase: Illegal App name: '[object Object] (app/bad-app-name).", 
name: "[object Object]", 
ngDebugContext: DebugContext_, 
ngErrorLogger: ƒ, …}

• javascript
• angular
• firebase
• angularfire2

Share Improve this question Follow edited May 16, 2018 at 16:27 S Philp 45233 silver badges1414 bronze badges asked May 16, 2018 at 11:20 Champ DecayChamp Decay 5966 bronze badges 4

• What is the name of your project/app in Firebase? As in what do you see in the Firebase console on the first line of the respective project's/app's card? – Alexander Staroselsky Commented May 16, 2018 at 16:40
• Try doing something like AngularFireModule.initializeApp(firebaseConfig, 'some-app-name') and see if you get the same error. – Alexander Staroselsky Commented May 16, 2018 at 17:02
• i have already tried @AlexanderStaroselsky – Champ Decay Commented May 17, 2018 at 12:40
• what version of firebase + angularfire are you on? – James Daniels Commented May 18, 2018 at 22:15

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Solution which worked for me :

npm uninstall --save firebase angularfire2

Then

npm install angularfire2 firebase --save

I just struggled with the same error. I resolved it by making sure the "@firebase/app": "^0.3.3", dependency was up to date.

To fix this one,

Step 1: Uninstall with the following mand

npm uninstall --save firebase

Step 2: Now, open your package.json file. There, you will find:

"angularfire2": "^5.0.0-rc.4"

Step 3: Below this line, add a this line (without the Caret(^) symbol): and save

"firebase": "4.8.0"

Step 4: Now do an npm install. Your app should work

• npm uninstall --save firebase.
• In your package.json:

"angularfire2": "^5.0.0-rc.7",
"firebase": "4.12.1"

• npm i

本文标签： javascriptFirebase returns quotappbadappnamequot in angularfire2Stack Overflow