Angular2 fire fails because the namespace 'firebase' does not export the member 'Promise'

I recently set up Angular 2 Fire on my project.

 "angularfire2": "^5.0.0-rc.0",

Now, in my root module (app module), I have the following setup:

export const firebaseConfig = {
  apiKey: "mykey",
  authDomain: "....",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "..."
};

imports:[
    AngularFireModule.initializeApp(firebaseConfig), 
    AngularFireDatabaseModule
 ]

However, I encountered an error message:

 Class 'FirebaseApp' incorrectly implements interface 'App'.
Property 'firestore' is missing in type 'FirebaseApp'.


node_modules/angularfire2/firebase.app.module.d.ts (12,28):
Namespace 'firebase' has no exported member 'Promise'.

I'm unsure where I went wrong or what additional steps I need to take to resolve this issue and make it work correctly.

javascriptangulartypescript

Answer №1

firebase.Promise has been deprecated in Firebase 4.5.0. The updated "angularfire2": "^5.0.0-rc.2" package addresses this change and should resolve any related problems.

Answer №2

To make it function, simply execute the command npm install anularfire2 --save

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

displaying an item within a text field

I have an input box created using Angular reactive forms <input type="text" formControlName="OrgName" placeholder="Enter name" maxlength="60"> <p class="fieldRequired" *ngIf="showNameMSg" ...

cssangularinputangular-material

Is there a way to assign multiple paths to a single page within the NextJS pages directory?

I'm currently working on a project that has two different themes, and I have the ability to switch between them based on the environment. Everything works perfectly, but I'm encountering an issue with paths. Some pages should open with different ...

javascriptreactjsnext.jsnext.js13

Adjust the size of the event bar on the FullCalendar resourceTimeline view

In my implementation of FullCalendar v6, I am displaying 6 months worth of data in the calendar, with each slot representing a one-month period. The issue I am facing is that when creating an event spanning 10 days, it currently takes up the entire width o ...

javascriptreactjsfullcalendargantt-chart

Error encountered: MongoDB cast exception - nested subdocument

Check out this schema design: var messageSchema = new Schema({ receivers: [User], message: String, owner: { type: Schema.Types.ObjectId, ref: 'User' } }); var userSchema = new Schema({ name: String, photo: String }); var in ...

javascriptmongodbmongoose

Issues with Vite's global import feature not functioning properly in a production build

My current setup involves loading all markdown files within a directory using a glob import. The code snippet below depicts this functionality: const useGetChangelogs = () => { const [changelogs, setChangelogs] = useState<string[]>([]); useEf ...

reactjstypescriptmarkdownviterollup

Unable to update due to outdated response call causing issues

I am currently in the process of updating outdated response calls and have encountered a peculiar issue where the response is not being properly ended. Typically, I would use : res.send(200, {message: 'Location Updated'}); However, this method ...

javascriptnode.jsexpressmongoose

Update the referenced lists in ng-admin

I'm currently working with ng-admin alongside a restful API, I have various referenced lists that undergo frequent updates from the server side. Is there a method to automatically refresh these referenced lists every 5 seconds using ng-admin? EDIT: ...

javascriptangularjsrestng-admin

Typescript is missing Zod and tRPC types throughout all projects in the monorepo, leading to the use of 'any'

Recently, I've found myself stuck in a puzzling predicament. For the last couple of weeks, I've been trying to troubleshoot why the types are getting lost within my projects housed in a monorepo. Even though my backend exposes the necessary types ...

typescriptnext.jsyarn-workspaceszodtrpc.io

Jest combined with Supertest | Looking out for open handles in Jest

I've been struggling to resolve the "Jest has detected the following 2 open handles" message that appears when running my tests. I seem to have hit a roadblock at the moment. One of the tests I'm trying to fix is as follows: describe('PO ...

javascriptnode.jsexpressjestjssupertest

Utilizing consistent form elements throughout various tabs

I'm working on an HTML project where I need to replicate form elements across different tabs with each tab having unique values. To achieve this, I found a helpful resource at . Here is what I've attempted: <html> <link rel="stylesheet" ...

javascriptjqueryhtmlbootstrap-4

rectangle/positionOffset/position().top/any type of element returning a position value of 0 within the container

While the height/position of the container is accurately displayed, attempting to retrieve the top position (or any position) of containing elements yields a return value of 0. Additionally, using .getBoundingClientRect() results in all values (top, left, ...

javascripthtmlcssuser-interface

Reset input field when checkbox is deselected in React

How can I bind value={this.state.grade} to clear the input text when the checkbox is unchecked? The issue is that I am unable to modify the input field. If I were to use defaultValue, how would I go about clearing the input box? http://jsbin.com/lukewahud ...

javascriptreactjs

Encountering an issue while attempting to implement Redux Toolkit alongside the MUI ToggleButtonGroup component

The error message initially started as: Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. When I attempted to update the Redux state using a dispatcher, the handleChange function suddenly showed an e ...

javascriptreactjsnext.jsmaterial-uiredux-toolkit

Utilizing AES encryption in C# and decrypting it in Angular, converting it from a byte[] / number array with the help

I am looking to securely encrypt and decrypt a byte[] in a C# API endpoint, then convert the decrypted document to base64 for viewing in a PDF viewer within an Angular 14 app. I came across this helpful guide on Stack Overflow [https://stackoverflow.com/q ...

c#arraysangularencryptionaes

What is the best way to identify the specific row and column that was clicked within a jQuery datatable

Scenario: When a user clicks on a cell in a datatable, a specific action should be triggered based on the row and column of that cell. How can I ensure that the user does not click on a certain column? If they do not click on that column, then I want to r ...

javascriptjquerydatatable

Improving Vue Component on Navigation

I am facing an issue with my navbar where I have two versions. Version 1 features a white text color, while Version 2 has black text. The need for two versions arises due to some pages having a white background, hence the requirement for black text. Bot ...

javascriptcssvue.jsvuejs2

"Error: The req.body object in Express.js is not defined

edit:hey everyone, I'm completely new to this. Here's the html form that I used. Should I add anything else to this question? <form action="/pesquisar" method="post"> <input type="text" id="cO" ...

javascriptnode.jsexpressbody-parser

Tips on editing a file exclusively when a specific requirement is fulfilled

Looking for a way to implement a put method within an Express API that allows users to update a document conditionally? Consider this scenario: you have an Instance document with an attribute called executed, which is set to true if the instance has been e ...

javascriptnode.jsmongodbexpressmongoose

Failed to parse module: Encountered an unexpected token while using babel-loader with BABEL_ENV set to development

I recently encountered an issue with my React project using webpack when I added the @superset-ui/embedded-sdk library via yarn. While the production build runs smoothly, the development build fails to compile. Since I am not very familiar with webpack, it ...

javascriptreactjsnode.jswebpackbabel-loader

Incorporating Azure blob image URLs within an Angular project

I have an ASP.NET WEB API and an angular project. I am considering using Azure blob storage to store and retrieve image files for displaying to users. Is it best practice to fetch the image URL from the API, transmit it to the client-side, and then use t ...

angularazureasp.net-web-apiazure-blob-storage