Unable to build due to TypeScript Firebase typings not being compatible

This is what I have done:

npm install firebase --save
typings install npm~firebase --save

After executing the above commands, my typings.json file now looks like this:

{
"ambientDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
},
"ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
},
"dependencies": {
    "firebase": "registry:npm/firebase#3.0.5+20160723033700"
}
}

To import Firebase in a *.ts file, I am using the following syntax:

import * as firebase from 'firebase';

However, upon compilation, I encountered the following error message:

src/app/services-common/database.service.ts (2, 27): Cannot find module 'firebase'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (C:\testapp\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:120:19)

What steps should I take to resolve this issue? What might be causing this problem?

Answer №1

It seems that there are some issues with those typings.

According to the documentation for angularfire2, you can try the following:

If you haven't already, install angularfire2 by running this command:

npm install angularfire2 --save

Make sure to include Firebase SDK typings as well:

typings install file:node_modules/angularfire2/firebase3.d.ts --save --global && typings install

Your typings.json file (specifically the firebase line) should resemble this example, which comes from a project using firebase3 and angular2 successfully.

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

What is the reason for the continual appearance of the *ngIf validation message?

Currently, I am working with Angular and HTML. I have implemented pattern validation for the first name field, which should not accept only numbers. <fieldset class="six"> <input id="firstName" ng-pattern="^[a-zA-Z]+$" type="text" ...

When a child is added to a pixi.js sprite, it causes the child's size and position to become

Using typescript and pixi.js v4.8.2, I have implemented the following code to create containers: let appWidth = app.renderer.view.width let appHeight = app.renderer.view.height mapContainer = new PIXI.Sprite(PIXI.loader.resources.water_pattern ...

In order to either pass a component variable as a parameter or set it as a global variable

Currently, I am in the process of restructuring my Angular2/Ionic2 code and seeking advice on the best practice for my specific situation. Within my component, I have declared a variable (this.questions) that I need to utilize in my service method. There ...

Following the recent update to webpack-dev-server and webpack, certain modules are being requested that do not exist in the project

Recently, I made updates to my project that involved Vue.js and Typescript. After updating webpack and webpack-dev-server, I encountered a problem where certain modules were missing when attempting to run the project in development mode. Here is some addi ...

Encountering an issue with importing an enum: An error is triggered stating 'Variable implicitly has type 'any' in certain areas where its type remains undetermined.'

When I define simple enums in the same file, everything works fine. However, exporting/importing them causes numerous compilation errors related to types. It seems like the issue only arises when defining enums in a separate file, pointing towards a proble ...

Prevent automatic submission of forms when selecting attributes in HTML forms using AngularJS

I need to create a form where users can select their branch of study. Here is the form I have designed- <form method="post" [formGroup]="formData" (click)="dataSubmit()" > <div class="form-group"> <label for="branch">Selec ...

Version 1.0 of the Angular 4 branch integrated with Auth0 JWT

I have been trying to implement the code provided on this website https://github.com/auth0/angular2-jwt/tree/v1.0 However, I am facing an issue with the following code snippet that needs to be placed in the app.module.ts file. The problem is that this co ...

Access PDF document in a fresh tab

How can I open a PDF file in a new tab using Angular 6? I have tried the following implementation: Rest controller: @RestController @RequestMapping("/downloads") public class DownloadsController { private static final String EXTERNAL_FILE_PATH = "/U ...

Organizing JSON responses with pg-promise, representing related keys as nested objects

In my latest project, I am developing a basic REST platform using Node.JS and PostgreSQL. To access the database, I am utilizing pg-promise. The main objective is to create a simple ticketing system that includes users and tickets. Currently, my focus is o ...

Enable the parsing of special characters in Angular from a URL

Here is a URL with special characters: http://localhost:4200/auth/verify-checking/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="59663c34383035643230383d2b606a6e6b686d6e6e193e34383035773a3634">[email protected]</a> ...

What is the proper way to declare a Type for a JSX attribute in Google AMP that utilizes square brackets?

When utilizing AMP's binding feature, you must apply specific attributes that encapsulate an element's property with square brackets and connect it to an expression. An example from AMP is shown below: <p [text]="'Hello ' + foo"> ...

One server hosts several Angular applications on an IIS website

Is it possible to host multiple independent angular applications on a single IIS virtual directory? For instance: mysite.com/admin mysite.com/sales mysite.com/inventory The issue arises when hosting with folders as the URLs to inner pages do not ...

What is the reason behind Angular's renderer.listen() causing the text to be deselected?

(Background: my project involves developing an email processor that displays emails on a web page) To enable click events in a specific area, I leverage Angular's Renderer2. This approach is necessary because the content is dynamically generated with ...

The animation of the splash screen in Angular is quite jarring and lacks fluidity

I am experiencing some issues with my angular splash screen animation. It works perfectly when there is no activity in the background, but when I simulate a real-life application scenario, the animation becomes stuttered, choppy, or sometimes does not anim ...

Subject.next() not triggering Observable on value change

I'm currently working on developing an autocomplete feature using Observable and Subject in Angular. However, I've run into an issue where the service method is not triggered when the Subject object's value changes. Below is a snippet of my ...

Nestjs is throwing an UnhandledPromiseRejectionWarning due to a TypeError saying that the function this.flushLogs is not recognized

Looking to dive into the world of microservices using kafka and nestjs, but encountering an error message like the one below: [Nest] 61226 - 07/18/2021, 12:12:16 PM [NestFactory] Starting Nest application... [Nest] 61226 - 07/18/2021, 12:12:16 PM [ ...

Using Angular service worker to pre-fetch video files

Issue arises when the service worker prefetches the entire video embedded on the page, leading to performance problems. My ngsw-config.json only contains configurations for local files, whereas the video is located on a different subdomain under /sites/def ...

Error loading module - Firebase Cloud Functions module not found

Currently, I am in the process of developing a Node.js function that will be deployed within Firebase Cloud Functions. This particular function requires the use of faker.js to aid in generating mock testing data. Unfortunately, an issue arose while trying ...

Angular's AuthGuard function will automatically trigger a session timeout if the user remains idle

Currently in the application, users can only access certain routes if they are authenticated. This is controlled by the canActivate function in the AuthGuard. However, I want to implement a session timeout feature that automatically logs out the user aft ...

Increase the totalAmount by adding the product each time

Can someone help me understand why the totalAmount shows as 20 when I add a product? Also, why doesn't it increase when I try to increment it? Any insights would be appreciated. Thank you. ts.file productList = [ { id: 1, name: 'Louis ...