Encountered an issue while trying to add @angular/fire to the project - unable to resolve

Having encountered some issues with the commands I used in these versions. Can anyone provide assistance in resolving this matter? Your help is greatly appreciated. ------------------------------------------- Angular CLI: 14.0.0 Node: 16.15.1 Package Manager: npm 8.11.0 OS: win32 x64 Angular: 14.0.0 ... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router Package Version ------------------------------------------- @angular-devkit/architect 0.1400.0 @angular-devkit/build-angular 14.0.0 @angular-devkit/core 14.0.0 @angular-devkit/schematics 14.0.0 @angular/fire 0.0.0 @schematics/angular 14.0.0 rxjs 7.5.5 typescript 4.7.3 ------------------------------------------- ng add @angular/fire Skipping installation: Package already installed Package "@angular/fire" was found but does not support schematics. ------------------------------------------------- ng add @angular/[email protected] Using package manager: npm ‼️ Package has unmet peer dependencies. Adding the package may not succeed. The package @angular/[email protected] will be installed and executed. Would you like to proceed? Yes npm WARN config global --global, --local are deprecated. Use --location=global instead. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/common npm ERR! @angular/common@"^14.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/common@"^12.0.0 || ^13.0.0" from @angular/[email protected] npm ERR! node_modules/@angular/fire npm ERR! @angular/fire@"7.3.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency npm ERR! resolution. npm ERR! npm ERR! See C:\Users\User\AppData\Local\npm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\User\AppData\Local\npm-cache_logs\2022-06-04T17_59_45_994Z-debug-0.log × Packages installation failed, see above. -------------------------------------------------

angulartypescriptfirebasenpmangularfire

Answer №1

A few days back, I came across the same issue. I found a solution through this Github problem: https://github.com/angular/angularfire/issues/3105

To fix it, you can follow these steps (assuming you already have firebase installed via NPM)

firebase login
npm i -D firebase-tools
ng add @angular/fire@latest

By the way, please try to format your question neatly...

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

Verify your identity with Azure Artifacts directly from the Dockerfile when using Java (Maven) and NPM

Is there a recommended solution for authenticating within a Dockerfile during the docker build phase for Azure Artifacts with Maven, NPM, or Python? While many solutions for accessing authenticated feeds of Azure Artifacts while building inside a Dockerfi ...

dockermavennpmazure-devopsazure-artifacts

Tips on preventing the "npm install" command from altering the package.json file

In my Maven project, I run `npm install` during the build using the `com.github.eirslett frontend-maven-plugin` plugin. The issue I'm facing is that after the build, Git detects a change in the `package.json` file, even though IntelliJ shows that the ...

node.jsgitnpmnpm-install

The DatePicker in Angular2 and Typescript is unable to execute the property 'toggle' because it is undefined

I've encountered an issue with the calendar icon for angular2's datepicker. Whenever I try to click on it, I keep getting this error: TypeError: Cannot read property 'toggle' of undefined at Object.eval [as handleEvent] (Admiss ...

angulartypescriptdatepickertoggle

Is this Firebase regulation accurate and suitable for PUT and GET requests in an Angular and Firebase environment?

Creating a system where users can only see their own posts and no one else can access them is my main goal. Authentication along with posting functionality is already in place and working, but I want to implement this without using Firebase restrictions. ...

angulartypescriptfirebase

Troubleshooting the Hover Effect of Buttons in Next.js when Using Tailwind CSS for Dynamic Color Changes

Encountering a problem with button hover functionality in a Next.js component using Tailwind CSS. The objective is to alter the button's background color dynamically on hover based on a color value stored in the component's state. This code func ...

javascriptreactjstypescriptnext.jstailwind-css

Is there a way for a function to be executed without being detected by surveillance?

Here's the Component I'm working with: @Component({ selector: 'app-signup', templateUrl: './signup.component.html', styleUrls: ['./signup.component.scss'] }) export class SignUpComponent implements OnInit ...

angulartypescriptunit-testingmockingkarma-jasmine

Retrieving data from Firebase query and displaying as an array of results

Currently utilizing the @react-native-firebase wrapper for interaction with Firebase's Firestore. Within my function, some querying to a specific collection is performed, with the expected result being an Array object containing each located document. ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

What is the best practice for inserting typescript definitions and writing them when the object already has a pre-existing definition?

Apologies for this question, as I am struggling to find the necessary information due to my limited understanding of Typescript. I have integrated a jquery plugin called typeahead and added a global variable named bound on the window object for communicati ...

typescript

The absence of Gulpfile has been detected despite its apparent existence

My current task involves helping a remote colleague set up gulp on Windows so they can compile one of our JavaScript projects locally. Previous attempts by another employee over the past year have not been successful, leaving behind potential remnants that ...

node.jsnpmgulp

Unable to bring in an exported class from a TypeScript file

I have a TypeScript file named foo.ts that contains an exported class called "Foo" export default class Foo{ } I am attempting to import this class into another file within the same directory import {Foo} from './foo'; However, I am encounter ...

typescript

Every time I attempt to make an HTTP request, I encounter a cross-origin error

When I make requests from the browser, they are valid. However, when using the Angular 9 app, I receive a 401 error. Below is the header from Chrome: Request URL: http://localhost:1234/api/Common/GetMy_List Request Method: GET Status Code: 401 Referre ...

c#asp.netangularhttpcross-domain

Refreshing my Cordova files

I'm encountering an issue with editing my Cordova project that was created using NodeJS/npm. I followed the instructions on this link to create the project, but when I try to make modifications to it, my changes keep getting deleted every time I run t ...

androidnode.jscordovaandroid-emulatornpm

Is there a way to clear the selected date in a date picker while using MatDateRangeSelectionStrategy?

Recently, I was experimenting with the date picker feature of Angular Material and stumbled upon this particular example After implementing this example with my own logic, everything seemed to be working perfectly fine except for one issue. The dates were ...

angulartypescriptangular-material

Does the Yarn repository function independently from NPM, or does it rely on the NPM repository in the background?

Contemplating switching to Yarn or PNPM in place of NPM. But unsure if they have distinct repositories or share the same one. I'm curious because if they are separate, the concern arises over package availability across repositories. ...

npmyarnpkgpnpmyarn-v2

When making Angular GET requests, the response may return a single Object instead of an Array

When making a GET request to my API, the data is returned as Objects inside an Object instead of an Array of Objects. This makes it difficult for me to iterate through and print the data. I am puzzled by why this specific request is behaving differently c ...

angularapihttp

I am encountering difficulties running the "npm install" command in CMD, despite trying various solutions to resolve the issue, I have been unable to find a solution to this persistent problem

C:\Users\91931>npm install npm ERR! code EPERM npm ERR! syscall open npm ERR! path C:\Users\91931\package-lock.json npm ERR! errno -4048 npm ERR! Error: EPERM: operation not permitted, open 'C:\Users\91931\pa ...

node.jsnpm

Managing the subscription function within the change event of a select tag in Angular 5 to prevent it from triggering repeatedly

Here is my DataService.ts: export class DataService { dataObs$: any; constructor(private http: HttpClient) { } getUsers() { return this.http.get('https://jsonplaceholder.typicode.com/users'); } getPostsById(id: number, refresh: boolean = ...

angular

Refreshing an Angular page when navigating to a child route

I implemented lazy loading of modules in the following way: { path: 'main', data: {title: ' - '}, component: LandingComponent, resolve: { images: RouteResolverService }, children: [ { path: '', redirectTo: 'home&apo ...

angulartypescriptangular2-routing

Encountering a problem while attempting to compile an Angular 8 application using the "ng build" command

Error Log Below: An error occurs while the application is running with ng-serve, but ng build throws a different error. Generating ES5 bundles for differential loading... Browserslist: caniuse-lite is outdated. Please run the following command npm u ...

angularheap-memory

My React project is unable to import the foundation SCSS file into the App.scss file

After installing zurb-foundation using npm, I attempted to import the .scss file into my App.scss file. Utilizing the "live sass server" for compiling the .scss code into .css code, a .css file was generated but did not display any code despite successfull ...

cssreactjsnpmsasszurb-foundation