Firebase is causing an issue: Error message states that a module cannot be found, and the default condition should be the

For some time now, I've been utilizing 

AngularCrashlytics(from @angular/fire)
. However, this morning I encountered issues with both build and ng serve, resulting in the error shown below. Can anyone assist me in resolving this?

https://i.stack.imgur.com/7CITC.png

In my app.module, I have already implemented configuration steps related to @angular/fire, which can be found at https://github.com/angular/angularfire/blob/master/docs/analytics/getting-started.md

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';

imports:[
AngularFireModule.initializeApp(environment.Tools.Firebase)//firebase related config,
AngularFireAnalyticsModule
]

My current configuration includes ng version specified in https://i.stack.imgur.com/qiEkL.png

The dependency versions from package.json are as follows:

"firebase": "^9.14.0",
"@angular/fire": "^7.4.1"

Additional Note: I have attempted various strategies such as cloning the project from scratch multiple times, removing the node modules folder followed by npm install, and upgrading both firebase and @angular/fire to their latest versions but unfortunately, the issue persists.

angularfirebasegoogle-analyticscrashlyticsangularfire

Answer №1

Today, I made the decision to upgrade my Angular version from 15.1.2 to 15.1.3:

https://i.stack.imgur.com/kIJJV.jpg

This resulted in encountering 34 errors, all related to AngularFire:

Error: export 'GoogleAuthProvider' (imported as 'GoogleAuthProvider') was not found in '@angular/fire/auth'

./node_modules/@angular/fire/fesm2015/angular-fire-analytics.js:7:0-47 - Error: Module not found: Error: Default condition should be last one

I attempted to resolve these issues by utilizing overrides in the package.json, but unfortunately, npm install failed to execute the overrides due to encountering EOVERRIDE errors. Even running npm install --force did not solve the problem.

To fix this issue, I had to forgo the use of overrides and instead modify "^15.0.0" to "15.1.2", followed by running npm install --force.

The reason behind why overrides didn't work eludes me. I may consider posting a question regarding this matter.

For now, I have decided to hold off on updating to the latest Angular until a new version of AngularFire is released.

Answer №2

It seems like the issue stems from a dependency located here: node_modules/@angular/fire/package.json

"dependencies": {
  "firebase": "^9.8.0",

According to this discussion: https://github.com/firebase/firebase-js-sdk/issues/7005#issuecomment-1415807037

Removing the ^ symbol within the version number resolved the problem for me.

To fix this, I made adjustments in my project's package.json file:

{
  "name": "myproject",
  "version": "0.0.0",
  "scripts": ...
  "dependencies": ...
  "devDependencies": {
    ...
  },  
  "overrides": {
    "@angular/fire": {
      "firebase": "9.8.0"
    }
  },

After making these changes, run "npm install" to update accordingly.

This is expected to be resolved in the upcoming release of "@angular/fire".

Answer №3

To enhance your package.json file, simply include the following code snippet:

  "overrides": {
    "@angular/fire": {
      "firebase": "9.8.1"
    }
  }

The version specified for firebase is "7.4.1" in the '@angular/fire' module. Your environment should have Node.js version 16.14.2 and npm version 8.5.0 installed. Make sure to remove 'node_modules', 'package-lock.json', and '.angular'. Do note that only npm command should be used, yarn is not recommended.

Answer №4

Having trouble with Angular Firebase integration? Check out this helpful resource:

Make sure to update your tsconfig.json file to resolve these errors.

 ...
  "compilerOptions": {
 ...
  "skipLibCheck": true.  //don't forget to add this line!!!!!!!
 },
 ...

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

Having Issues with CDK Virtual Scrolling in Angular Material Table

Dealing with an angular material table that contains millions of records can be quite challenging. I have implemented pagination with various options such as 10, 25, 50, 100, 500, and 1000 items per page. However, when selecting the option for 1000 or all ...

angulartypescriptangular-materialpaginationangular-cdk-virtual-scroll

The ng build command encounters a failure (module cannot be found) when running in a docker environment on Ubuntu, while it successfully runs

I'm facing an issue that I can't quite pinpoint whether it's related to docker, Ubuntu, or node/npm. Here are all the details I have: Although there are known causes for this module error, none of them explain why it works on various Window ...

angulardockernpmaws-codebuild

How to Validate Ionic 2 Radio Button Selections with TypeScript

Imagine having a list like the one shown below: <ion-list radio-group [(ngModel)]="autoManufacturers"> <ion-list-header> Auto Manufacturers </ion-list-header> <ion-item> <ion-label>Cord</ion-label> &l ...

angulartypescriptionic-frameworkionic2ionic3

Is there an issue with validation when using looped radio buttons with default values in data-driven forms?

Within my reactive form, I am iterating over some data and attempting to pre-set default values for radio buttons. While the default values are being successfully set, the validation is not functioning as expected. <fieldset *ngIf="question.radioB ...

angulartypescript

Creating a Dynamic Table with Angular 6 - Automating the Population of Content Values

I have a task of populating a table with data from a JSON file. Take a look at the following code snippet: <table> <thead> <tr> <th *ngFor="let datakeys of listData[0] | keys">{{ datakeys }}</th> </tr> < ...

angulartypescriptangular6

What is the best way to handle the completion of an HTTP request in Angular 8?

This is the service provided. existWayBillByRsBillNumber(billNumber: string){ return this.http.get<boolean>(this.baseUrl + 'Common/ExistWayBillByRsBillNumber/'+billNumber); } This is how the service call is made. this.commonServic ...

angular

Ways to retrieve an array following a function call

After a lot of testing and troubleshooting, I finally got my array to function properly in the console. However, when I click the button, the array is displayed on the console but not in my HTML. TS: jogar(){ for(var u=0;u<6;u++){ this.y ...

javascriptangularionic2

I prefer to have static modules generated on the home page rather than dynamic ones

As a newcomer to Angular, I am facing an issue with dynamic modules in my project. Currently, all modules are being generated when I run the project, but I only want to generate the login page module. Below is a screenshot and the code from the app.routing ...

angular

What is the most effective method for sending Firestore data to React components?

Having trouble efficiently setting a user's profile and passing that data to other components? Below, I've shared my current approach, but the rendering process is not as smooth. Every time I interact with different parts of the app, the data fro ...

reactjsfirebasegoogle-cloud-firestore

Ways to modify the information retrieved from JSON?

I've integrated the OMDB api (Online Movie DB) into my project. The interface I created is returning the expected data types, with data being returned as {Search: Array(10), totalResults: "31", Response: "True"} when using the http get method. The spe ...

angularrxjsangular2-observables

When attempting to assign a 'string' type to the @Input property, I am receiving an error stating that it is not assignable to the 'PostCard Layout' type

Encountering an issue The error message 'Type 'string' is not assignable to type 'PostCard Layout'' is being displayed A parent component named page-blog.component.html is responsible for defining the class styles and passi ...

javascriptangulartypescript

Ways to display the initial letter of the surname using Angular

I need help displaying the full first name and first letter of the last name. For example, if the name is John Doe, I want it to show as John D. Currently, my code is not displaying all the letters from the last name. Here is what I have tried: <div cl ...

angular

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

javascriptcssangulartypescriptsass

CORS policy has blocked access to XMLHttpRequest from the origin because the requested resource does not have the 'Access-Control-Allow-Origin' header

I recently built an API project using MVC Core. Everything seemed to be working fine when testing the GET and POST methods with Postman. However, I encountered a CORS error when trying to call these APIs from my Angular App: Access to XMLHttpRequest fro ...

angularapiasp.net-corecorsasp.net-core-mvc

Construct the output directory according to the specific environment

I'm exploring the process of constructing and launching an Angular 2 project using angular cli with variables specified in my environment typescript files. For instance, within my angular-cli.json file, there is a dev environment linked to "environme ...

angularangular-cli

When utilizing the catch function callback in Angular 2 with RxJs, the binding to 'this' can trigger the HTTP request to loop repeatedly

I have developed a method to handle errors resulting from http requests. Here is an example of how it functions: public handleError(err: any, caught: Observable<any>): Observable<any> { //irrelevant code omitted this.logger.debug(err);//e ...

angulartypescriptrxjsrxjs5angular2-http

Issue: The module 'MatChipList' (imported as 'i13$1') could not be located in '@angular/material/chips'

I am facing issues with upgrading my Angular project from version 5.x to 15.x due to the presence of alfresco-core dependencies. The errors I am encountering are causing obstacles in the process. Any assistance in resolving these problems would be greatly ...

angularalfrescoalfresco-share

Challenges with variable scopes and passing variables in Ionic 2 (Typescript)

In my Ionic 2 TypeScript file, I am facing an issue with setting the value of a variable from another method. When I close the modal, I get undefined as the value. I'm encountering difficulty in setting the value for coord. export class RegisterMapP ...

javascriptangulartypescriptionic2

Separate files containing TypeScript decorators are defined within a project

(Let's dive into Typescript and Angular2, shall we?) Having primarily coded in Symfony2 with annotations, I found it convenient to configure entity mapping, routing, and other features using yaml, xml, or plain PHP. This flexibility was great for cre ...

typescriptangular

Protractor's compatibility with Headless Chrome is hindered on AWS CodeBuild, yet functions successfully when run locally

I am facing an issue with my webpage that requires Google Authentication before moving on to an angular web page. I have created some basic end-to-end tests which are working perfectly fine in Linux using Chrome Headless: The test finds the username fiel ...

angularprotractore2e-testinggoogle-chrome-headlessaws-codebuild