File /src/environments/environment.ts does not exist on ng add with Angular 15

[danielzgtg]

/src/environments/environment.ts is optional now with Angular 15. Angularfire's schematics should detect this to avoid an error.

Version info

Angular: 15.0.1

Firebase: 9.14.0

AngularFire: 7.5.0

Other (e.g. Ionic/Cordova, Node, browser, operating system): Node 19.1.0, no browser, Ubuntu 22.10

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem

Just run ng new test123 && cd test123 && ng add @angular/fire.

Steps to set up and reproduce

home@daniel-desktop3:/run/user/1000$ ng new test123
Node.js version v19.1.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE test123/README.md (1061 bytes)
CREATE test123/.editorconfig (274 bytes)
CREATE test123/.gitignore (548 bytes)
CREATE test123/angular.json (2705 bytes)
CREATE test123/package.json (1038 bytes)
CREATE test123/tsconfig.json (901 bytes)
CREATE test123/tsconfig.app.json (263 bytes)
CREATE test123/tsconfig.spec.json (273 bytes)
CREATE test123/.vscode/extensions.json (130 bytes)
CREATE test123/.vscode/launch.json (474 bytes)
CREATE test123/.vscode/tasks.json (938 bytes)
CREATE test123/src/favicon.ico (948 bytes)
CREATE test123/src/index.html (293 bytes)
CREATE test123/src/main.ts (214 bytes)
CREATE test123/src/styles.css (80 bytes)
CREATE test123/src/assets/.gitkeep (0 bytes)
CREATE test123/src/app/app.module.ts (314 bytes)
CREATE test123/src/app/app.component.css (0 bytes)
CREATE test123/src/app/app.component.html (23083 bytes)
CREATE test123/src/app/app.component.spec.ts (959 bytes)
CREATE test123/src/app/app.component.ts (211 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
home@daniel-desktop3:/run/user/1000$ cd test123
home@daniel-desktop3:/run/user/1000/test123$ ng add @angular/fire
Node.js version v19.1.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.
? Would you like to share pseudonymous 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. No
Global setting: enabled
Local setting: disabled
Effective status: disabled
ℹ Using package manager: npm
✔ Found compatible package version: @angular/fire@7.5.0.
✔ Package information loaded.

The package @angular/fire@7.5.0 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
UPDATE package.json (1068 bytes)
✔ Packages installed successfully.
? What features would you like to setup? Authentication, Firestore
Using firebase-tools version 11.16.1
? Which Firebase account would you like to use? test@example.com
✔ Preparing the list of your Firebase projects
? Please select a project: project12345
✔ Preparing the list of your Firebase WEB apps
? Please select an app: project-lab12345
✔ Downloading configuration data of your Firebase WEB app
File /src/environments/environment.ts does not exist

Sample data and security rules

The Firebase project online is a new and empty project.

Debug output

Errors in the JavaScript console

This is not a runtime problem.

Output from firebase.database().enableLogging(true);

This is not a runtime problem.

Screenshots

Console output pasted above.

Expected behavior

It should succeed and I should not see any red lines in the terminal.

Actual behavior

ng add fails at a red line File /src/environments/environment.ts does not exist then exits without completing. See the output above.

Now I have to set up angularfire manually. I could have created environment.ts but it would still feel equally manual.

[bleuscyther]

Full angular 15 support is discussed here: https://github.com/angular/angularfire/issues/3290

[Abhishek-Sylvester]

i have the exact same problem can you tell me what should be done

[udyapatel]

I am also facing the same problem can you brief about firebase setup with angular 15

[Jor-ban]

I guess you need to create src/environments/environment.ts with export const environment = {} untill its fixed for Angular v15

[udyapatel]

yes, I did but when I am importing this AngularFireModule.initializeApp(environment.firebase) in AppModule then, environment module could not find an error has occurred. So could you explain each and every step for firebase setup with angular 15.

[Jor-ban]

yes, I did but when I am importing this AngularFireModule.initializeApp(environment.firebase) in AppModule then, environment module could not find an error has occurred. So could you explain each and every step for firebase setup with angular 15.

I would recommend downgrading to v13, you have to move all your files in src to a new project that uses v13, just move higher directory, then

npx @angular/cli@13 new

After that, move all your files from the previous project to this, this actually solved all my issues touching angular fire

[yingdi11]

yes, I did but when I am importing this AngularFireModule.initializeApp(environment.firebase) in AppModule then, environment module could not find an error has occurred. So could you explain each and every step for firebase setup with angular 15.

I would recommend downgrading to v13, you have to move all your files in src to a new project that uses v13, just move higher directory, then

npx @angular/cli@13 new

After that, move all your files from the previous project to this, this actually solved all my issues touching angular fire

Then I got below error:

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: angularfire-login-device3@0.0.0 npm ERR! Found: jasmine-core@3.4.0 npm ERR! node_modules/jasmine-core npm ERR! dev jasmine-core@"~3.4.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer jasmine-core@">=3.8" from karma-jasmine-html-reporter@1.7.0 npm ERR! node_modules/karma-jasmine-html-reporter npm ERR! dev karma-jasmine-html-reporter@"^1.4.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 resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! C:\Users\Owner\AppData\Local\npm-cache_logs\2023-02-08T21_03_02_939Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Owner\AppData\Local\npm-cache_logs\2023-02-08T21_03_02_939Z-debug-0.log

[Yelose]

First, install firebase-tools, they are very very helpfull. create your file src/environments/environment.ts

export const environment = { production: false; }

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

following thoose steps, you don't have to worry about how to manage module.ts or anything.