ng add @angular/fire -> Package install failed

[jopmiddelkamp]

Running ng add @angular/fire on a fresh install of Angular results into Package install failed

Version info

Angular: 13.1.2 Node: 16.13.1 npm: 8.1.2 Firebase: 10.0.1 AngularFire: 7.2.0 OS: macOS Monterey (12.0.1)

How to reproduce these conditions

ng new <project>
ng add @angular/fire (no matter which option is chosen)

Result

ℹ Using package manager: npm
✔ Found compatible package version: @angular/[email protected].
✔ Package information loaded.

The package @angular/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
UPDATE package.json (1171 bytes)
✔ Packages installed successfully.
? What features would you like to setup? ng deploy -- hosting
✖ Package install failed.
/Users/<user>/Projects/<project>/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/util/hostReportError.js:4
    setTimeout(function () { throw err; }, 0);
                             ^

TypeError: Cannot read properties of undefined (reading 'message')
    at Object.error (/Users/<user>/Projects/<project>/node_modules/@angular/cli/models/schematic-command.js:432:47)
    at SafeSubscriber.__tryOrUnsub (/Users/<user>/Projects/<project>/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Subscriber.js:205:16)
    at SafeSubscriber.error (/Users/<user>/Projects/<project>/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Subscriber.js:156:26)
    at Subscriber._error (/Users/<user>/Projects/<project>/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Subscriber.js:92:26)
    at Subscriber.error (/Users/<user>/Projects/<project>/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Subscriber.js:72:18)
    at TapSubscriber._error (/Users/<user>/Projects/<project>/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/tap.js:75:26)
    at TapSubscriber.Subscriber.error (/Users/<user>/Projects/<project>/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Subscriber.js:72:18)
    at MergeMapSubscriber.SimpleOuterSubscriber.notifyError (/Users/<user>/Projects/<project>/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/innerSubscribe.js:72:26)
    at SimpleInnerSubscriber._error (/Users/<user>/Projects/<project>/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/innerSubscribe.js:30:21)
    at SimpleInnerSubscriber.Subscriber.error (/Users/<user>/Projects/<project>/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Subscriber.js:72:18)

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[kevin192291]

Yep, Same issue here

[VipsPurpleSquirrel]

I have exactly the same problem. I have tried downgrading @angular/cli and node, and also now upgrading to the latest..

`Angular CLI: 12.2.14 Node: 17.1.0 (Unsupported) Package Manager: npm 8.1.2 OS: darwin arm64

Angular: 12.2.15 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1202.14 @angular-devkit/build-angular 12.2.14 @angular-devkit/core 12.2.14 @angular-devkit/schematics 12.2.14 @angular/cli 12.2.14 @angular/fire 7.2.0 @schematics/angular 12.2.14 rxjs 6.6.7 typescript 4.3.5 ` Thanks in advance for any help from anyone!

[skryde]

Hi. Same issue here. In my case i'm using Angular CLI 13.1.3 and Angular 13.1.0 Here the ng versionoutput:

user in ~/Path/to/project on main λ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.1.3
Node: 14.18.2
Package Manager: npm 8.3.0
OS: linux x64

Angular: 13.1.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.3
@angular-devkit/build-angular   13.1.3
@angular-devkit/core            13.1.3
@angular-devkit/schematics      13.1.3
@angular/cli                    13.1.3
@angular/fire                   7.2.0
@schematics/angular             13.1.3
rxjs                            7.4.0
typescript                      4.5.4

[rkoyama]

Had the same error message. Just ran the install script with sudo and got past it: sudo ng add @angular/fire

ng version output:

Angular CLI: 13.1.3
Node: 16.13.2
Package Manager: npm 8.3.1
OS: linux x64

Angular: 13.1.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.3
@angular/cdk                    13.1.2
@angular/cli                    13.1.3
@angular/fire                   7.2.0
@angular/material               13.1.2
@schematics/angular             13.1.3
rxjs                            7.4.0
typescript                      4.5.4

[HarryAllen1]

I found that if you run npm i -D firebase-tools manually, this will fix the problem. If this doesn't work, try: npm i -D firebase-tools@9

[sbardijs]

npm i -D firebase-tools

Thanks

[riker09]

I think I'm having this issue. I've successfully created a new Angular project with ng new my-app. Afterwards I want to ng add @angular/fire and get stuck at the point where I should select a project. I'm not even able to CTRL + C my way out of the dialogue. It's stuck there until I terminate the process.

I tried adding npm i -D firebase-tools after creating the Angular project and before adding @angular/fire but then the wrong version is detected:

$ ng add @angular/fire
ℹ Using package manager: npm
✔ Found compatible package version: @angular/[email protected].
✔ Package information loaded.

The package @angular/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support.

[riker09]

I believe I found a solution: It was mentioned in issue #3121 that a downgrade to [email protected] fixes this. And low and behold, it did. So I did not get the error in THIS issue, but that from 3121. Apologies.

[TaiKamilla]

Try the following, it did work for me

npm install --save-dev @angular/cli@latest && \
sudo npm install --save-dev @angular/cli@latest -g && \
npm i -D firebase-tools && \
ng add @angular/fire@latest

[VipsPurpleSquirrel]

@Yafar -Thank you…it worked

[ghost]

doesnt work :

ng add @angular/fire ℹ Using package manager: npm ✔ Found compatible package version: @angular/[email protected]. ✔ Package information loaded.

The package @angular/[email protected] will be installed and executed. Would you like to proceed? Yes npm ERR! code ECONNRESET npm ERR! syscall read npm ERR! errno -4077 npm ERR! network read ECONNRESET npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings.. npm ERR! network npm ERR! network If you are behind a proxy, please make sure that the npm ERR! network 'proxy' config is set properly. See: 'npm help config'

npm ERR! A complete log of this run can be found in: bug-0.log npm ERR! C:\Users\HP\AppData\Local\npm-cache_logs\2022-04-09T11_15_26_666Z-debug-0.log

[gvsakhil]

Installing firebase-tools fixed the issue

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

[HarryAlvarado28]

try

firebase login --reauth

or

$ firebase logout

$ firebase login

[robmanganelly]

I had the same issue so, I'll share how i solved

• sudo firebase login login link received and process completed
• sudo ng add @angular/firebase after this the process is straightforward

i used sudo on login because the installation breaks otherwise, by asking a code in the middle of the process. So I just logged with sudo and voila. That happened while working with Linux Kubuntu OS

[jerusso]

What worked for me was:

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

I recently migrated to a new computer, so I forgot to install firebase-tools in the project.

[ryanlogsdon]

I solved it by running:

terminal > curl -sL https://firebase.tools | bash

this comes from https://firebase.google.com/docs/cli#install-cli-mac-linux

then running

ng generate environments
npm install @angular/fire
ng add @angular/fire

[jalle007]

It still doesn't work soo frustrating !

ng add @angular/fire@latest

ℹ Using package manager: npm ✔ Package information loaded.

The package @angular/fire@latest will be installed and executed. Would you like to proceed? Yes ✖ Packages installation failed, see above.

[vasantheeswaran]

Try the following, it did work for me

npm install --save-dev @angular/cli@latest && \
sudo npm install --save-dev @angular/cli@latest -g && \
npm i -D firebase-tools && \
ng add @angular/fire@latest

it actually worked for me , thank you

[Elie-E]

That what I did and it work :

firebase login

then logged to my firebase account after that i could run

ng add @angular/fire