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

AllySummers · 2021-05-17T15:14:26Z

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)

The text was updated successfully, but these errors were encountered:

beeman · 2021-05-17T15:17:04Z

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 · 2021-05-17T15:48:15Z

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/[email protected]
- ng add @angular/[email protected] --verbose

Also doing without the previous install, in other words, only ng add @angular/[email protected] --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 · 2021-05-18T15:43:22Z

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 · 2021-05-23T21:29:25Z

@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/[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 (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 · 2021-05-25T19:43:49Z

@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 · 2021-06-07T01:46:59Z

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

jamesdaniels · 2021-09-14T07:27:12Z

Addressed in 7.1.0-rc.0

danitor1 · 2023-05-11T20:04:19Z

El mismo problema. No puedo instalar Firestore con Angular 16:
`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
✔ Packages successfully installed.
Package "@angular/fire" was found but does not support schematics.`

GustavoMalimpensa · 2023-05-16T16:42:45Z

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

Manmansui · 2023-05-18T05:35:07Z

Works for me:

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

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

jamesdaniels mentioned this issue May 17, 2021

Marking peer support for NG12 #2834

Merged

jamesdaniels closed this as completed Sep 14, 2021

fredsa mentioned this issue Dec 20, 2023

Deprecate @angular/[email protected] #3480

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

AllySummers commented May 17, 2021

beeman commented May 17, 2021

Uh oh!

KingDarBoja commented May 17, 2021

Uh oh!

jamesdaniels commented May 18, 2021

Uh oh!

geromegrignon commented May 23, 2021

Uh oh!

jamesdaniels commented May 25, 2021

Uh oh!

nartc commented Jun 7, 2021

Uh oh!

jamesdaniels commented Sep 14, 2021

Uh oh!

danitor1 commented May 11, 2023

Uh oh!

GustavoMalimpensa commented May 16, 2023

Uh oh!

Manmansui commented May 18, 2023

Uh oh!

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

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

Comments

AllySummers commented May 17, 2021

Version info

How to reproduce these conditions

Debug output

Expected behavior

Actual behavior

beeman commented May 17, 2021

Uh oh!

KingDarBoja commented May 17, 2021

Uh oh!

jamesdaniels commented May 18, 2021

Uh oh!

geromegrignon commented May 23, 2021

Uh oh!

jamesdaniels commented May 25, 2021

Uh oh!

nartc commented Jun 7, 2021

Uh oh!

jamesdaniels commented Sep 14, 2021

Uh oh!

danitor1 commented May 11, 2023

Uh oh!

GustavoMalimpensa commented May 16, 2023

Uh oh!

Manmansui commented May 18, 2023

Uh oh!