Unable to ng add @angular/fire on first try on Angular 12 in brand new app

[AllySummers]

Version info

Angular: 12.0.0

Firebase: @angular/fire bundled version

AngularFire: 6.1.4 (latest at time of writing)

Other (e.g. Ionic/Cordova, Node, browser, operating system):
Node: v14.16.0
NPM: 6.14.13
OS: Windows 10 Pro, Windows 10 Enterprise, Mac (tested all 3)
Using regular Angular CLI

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem
N/A

Steps to set up and reproduce

npm i -g @angular/cli@latest
ng new firebasetest --routing --style scss
cd firebasetest
ng add @angular/fire@latest

• note this failed due to unable to find module 'bluebird'
  ng add @angular/fire@latest
• this works and adds the package as intended

Sample data and security rules

N/A

Debug output

N/A

** Screenshots **

N/A

Expected behavior

@angular/fire should be added on first run of ng add @angular/fire@latest

Actual behavior

Output from running all above commands (from Windows in this specific example)

PS C:\Users\Ally\Desktop\firebasetest> node -v
v14.16.0
PS C:\Users\Ally\Desktop\firebasetest> npm -v
6.14.13
PS C:\Users\Ally\Desktop> ng --version

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


Angular CLI: 12.0.0
Node: 14.16.0
Package Manager: npm 6.14.13
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1200.0 (cli-only)
@angular-devkit/core         12.0.0 (cli-only)
@angular-devkit/schematics   12.0.0 (cli-only)
@schematics/angular          12.0.0 (cli-only)
PS C:\Users\Ally\Desktop> ng new firebasetest --routing --style scss
CREATE firebasetest/angular.json (3243 bytes)
CREATE firebasetest/package.json (1074 bytes)
CREATE firebasetest/README.md (1002 bytes)
CREATE firebasetest/tsconfig.json (783 bytes)
CREATE firebasetest/.editorconfig (274 bytes)
CREATE firebasetest/.gitignore (604 bytes)
CREATE firebasetest/.browserslistrc (703 bytes)
CREATE firebasetest/karma.conf.js (1429 bytes)
CREATE firebasetest/tsconfig.app.json (287 bytes)
CREATE firebasetest/tsconfig.spec.json (333 bytes)
CREATE firebasetest/src/favicon.ico (948 bytes)
CREATE firebasetest/src/index.html (298 bytes)
CREATE firebasetest/src/main.ts (372 bytes)
CREATE firebasetest/src/polyfills.ts (2820 bytes)
CREATE firebasetest/src/styles.scss (80 bytes)
CREATE firebasetest/src/test.ts (743 bytes)
CREATE firebasetest/src/assets/.gitkeep (0 bytes)
CREATE firebasetest/src/environments/environment.prod.ts (51 bytes)
CREATE firebasetest/src/environments/environment.ts (658 bytes)
CREATE firebasetest/src/app/app-routing.module.ts (245 bytes)
CREATE firebasetest/src/app/app.module.ts (393 bytes)
CREATE firebasetest/src/app/app.component.html (23809 bytes)
CREATE firebasetest/src/app/app.component.spec.ts (1075 bytes)
CREATE firebasetest/src/app/app.component.ts (217 bytes)
CREATE firebasetest/src/app/app.component.scss (0 bytes)
√ Packages installed successfully.
warning: LF will be replaced by CRLF in .browserslistrc.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in karma.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app-routing.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.scss.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.spec.json.
The file will have its original line endings in your working directory
    Successfully initialized git.
PS C:\Users\Ally\Desktop> cd firebasetest
PS C:\Users\Ally\Desktop\firebasetest> ng add @angular/fire@latest --verbose
? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see https://angular.io/analytics. Yes

Thank you for sharing anonymous usage data. Would you change your mind, the following
command will disable this feature entirely:

    ng analytics project off

i Using package manager: npm
- Loading package information from registry...Locating potential npmrc files:
Trying 'C:\Program Files\nodejs\etc\npmrc'...not found.
Trying 'C:\Users\Ally\.npmrc'...found.
Trying 'C:\Users\.npmrc'...not found.
Trying 'C:\Users\Ally\.npmrc'...found.
Trying 'C:\Users\Ally\Desktop\.npmrc'...not found.
Trying 'C:\Users\Ally\Desktop\firebasetest\.npmrc'...not found.
× Package has unmet peer dependencies. Adding the package may not succeed.

The package @angular/fire@latest will be installed and executed.
Would you like to proceed? Yes
√ Package successfully installed.
UPDATE package.json (1339 bytes)
√ Packages installed successfully.
Cannot find module 'bluebird'
Require stack:
- C:\Users\Ally\Desktop\firebasetest\node_modules\unzipper\lib\parse.js
- C:\Users\Ally\Desktop\firebasetest\node_modules\unzipper\unzip.js
- C:\Users\Ally\Desktop\firebasetest\node_modules\firebase-tools\lib\emulator\download.js
- C:\Users\Ally\Desktop\firebasetest\node_modules\firebase-tools\lib\emulator\downloadableEmulators.js
- C:\Users\Ally\Desktop\firebasetest\node_modules\firebase-tools\lib\emulator\databaseEmulator.js
- C:\Users\Ally\Desktop\firebasetest\node_modules\firebase-tools\lib\emulator\controller.js
- C:\Users\Ally\Desktop\firebasetest\node_modules\firebase-tools\lib\emulator\commandUtils.js
- C:\Users\Ally\Desktop\firebasetest\node_modules\firebase-tools\lib\commands\database-get.js
- C:\Users\Ally\Desktop\firebasetest\node_modules\firebase-tools\lib\commands\index.js
- C:\Users\Ally\Desktop\firebasetest\node_modules\firebase-tools\lib\index.js
- C:\Users\Ally\Desktop\firebasetest\node_modules\@angular\fire\schematics\utils.js
PS C:\Users\Ally\Desktop\firebasetest> ng add @angular/fire@latest --verbose
i Using package manager: npm
× Package has unmet peer dependencies. Adding the package may not succeed.

The package @angular/fire@latest will be installed and executed.
Would you like to proceed? Yes
√ Package successfully installed.
UPDATE package.json (1339 bytes)
√ Packages installed successfully.
√ Preparing the list of your Firebase projects
? Please select a project: lgbt-directory (lgbt-directory)
CREATE firebase.json (663 bytes)
CREATE .firebaserc (142 bytes)
UPDATE angular.json (3414 bytes)

[beeman]

If someone is interested in reproducing the issue in Docker, you should be able to use this:

# docker build -t firebase-test .
# docker run firebase-test

FROM node:14-alpine
WORKDIR /workspace
RUN npm i -g @angular/cli@latest
RUN ng new firebase --routing --style scss
WORKDIR /workspace/firebase
RUN ng add @angular/fire@next

[KingDarBoja]

I made it work in a fresh nx workspace with angular cli v12 using my Windows Machine by running the following command:s

- npm install @angular/fire@6.1.4
- ng add @angular/fire@6.1.4 --verbose

Also doing without the previous install, in other words, only ng add @angular/fire@6.1.4 --verbose yields:

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


Angular CLI: 12.0.0
Node: 12.14.0
Package Manager: npm 6.13.4
OS: win32 x64

Angular: 12.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@schematics/angular             12.0.0
rxjs                            6.6.7
typescript                      4.2.4

[jamesdaniels]

So I wasn't able to find a fix for this last night, it seems that the libraries installed in the prior schematic step (NodePackageInstallTask) aren't available immediately in NG12 even though my schematic step depends on the former... I wasn't able to reproduce this against my development environment (pinned directory), only sporadically against a local tarball, and reliably against NPM. This smells like a race condition to me.

In 6.1.5 I added a reasonable error message for this though: The NodePackageInstallTask does not appear to have completed successfully or we ran into a race condition. Please run the ng add @angular/fire command again.

I'll keep digging in here & call in some assistance if I'm not able to find a solution with fresh eyes.

[geromegrignon]

@jamesdaniels

Having your new error message being displayed on ng add @angular/fire on a Angular 12 project :

            
ℹ Using package manager: npm
✔ Found compatible package version: @angular/fire@6.1.5.
✔ Package information loaded.
 
The package @angular/fire@6.1.5 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
UPDATE package.json (1891 bytes)
✔ Packages installed successfully.
The NodePackageInstallTask does not appear to have completed successfully or we ran into a race condition. Please run the `ng add @angular/fire` command again.

[jamesdaniels]

@geromegrignon run ng add again and it should work, there's some sort of race condition after it npm installs that i haven't tracked down.

[nartc]

Seeing this just now in Angular 12 (Nx Workspace) project. Rerunning with ng add @angular/fire@6 works.

[jamesdaniels]

Addressed in 7.1.0-rc.0

[danitor1]

El mismo problema. No puedo instalar Firestore con Angular 16:
`ng add @angular/fire
ℹ Using package manager: npm
✔ Found compatible package version: @angular/fire@0.0.0.
✔ Package information loaded.

The package @angular/fire@0.0.0 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
Package "@angular/fire" was found but does not support schematics.`

[GustavoMalimpensa]

O mesmo problema. Não é possível instalar o Firestore com Angular 16:
ng add @angular/fire

[Manmansui]

Works for me:

1. Uninstall @angular/fire: npm uninstall @angular/fire
2. Force install: npm install @angular/fire --force
3. Import:
   a. AngularFireModule from'@angular/fire/compat'
   b. AngularFireAuthModule from '@angular/fire/compat/auth'

Credit: https://stackoverflow.com/a/72508902/11719489