add angular v17 support

[DimitriTsikaridze]

Version info

Angular:

Firebase:

AngularFire:

Other (e.g. Ionic/Cordova, Node, browser, operating system):

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem

Steps to set up and reproduce

Sample data and security rules

Debug output

** Errors in the JavaScript console **

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

** Screenshots **

Expected behavior

Actual behavior

[woutersteven]

I think if you upgrade from v16 to v17 using the schematics, AngularFire v16 will continue to work, but other NPM updates will break due to dependency issues. I think they will release v17 pretty soon, since they matched versioning to match Angular and looking at the tags, there's already a pre-release version tagged: 17.0.0-next.0

[DimitriTsikaridze]

maybe but I'm currently having issues where when I run ng add in v17 angular/fire it doesn't find compatible package

[Hambat]

any news?

[nolansingroy]

I am having same issues. I created a angular project in 17 but adding angular fire does not support schematics

ng add @angular/fire Skipping installation: Package already installed Package "@angular/fire" was found but does not support schematics.

[sergiotome]

+1 here. Need Angular Fire updated to be compatible with Angular 17.

[rpaivabr]

+1

[gazz9ar]

Is there a way to ignore the conflicting dependency until we get the release 17?

[DimitriTsikaridze]

Is there a way to ignore the conflicting dependency until we get the release 17?

maybe with legacy peer deps or force or both, I haven't tried yet

[gazz9ar]

Is there a way to ignore the conflicting dependency until we get the release 17?

maybe with legacy peer deps or force or both, I haven't tried yet

I run npm i --legacy-peer-deps and the login I had with firebase still works

[woutersteven]

You can configure an "overrides" block inside package.json to override which package versions are used for a given package, however I personally think this is a last resort and only use it for packages that i have tot keep, but are unmaintained. In most cases, I will wait for an update.

You can also look at the NPM package "npm-force-resolutions", but again, as a last resort.

[PierreDuc]

For me it worked to just do ng add @angular/fire@next. But this was with a new project

[woutersteven]

For me it worked to just do ng add @angular/fire@next. But this was with a new project

Great idea, I've immediately tried that in existing projects. Not sure why I didn't consider that.

I had to make some manual changes to dependencies, but it seems to be working (for me) with: (listing relevant packages only):

• Angular v17.0.2
• AngularFire v17.0.0 (next)
• Angular PWA v17.0.0
• Firebase v10.6.0

I'm using the following features and they work as expected. Storage, Firestore, Hosting, Authentication, Messaging, Cloud Functions (v1 and v2) and AppCheck (monitoring only at the moment).

Notes:

1. Running the schematics will recreate configuration files for Firebase. It will possibly update main.ts, angular.json and firebase.json, on top of package.json. So if you're not sure, make sure to make backups of those first. If you are using a repo, you can view changes afterwards and revert/update as needed.
2. Installing @next versions in production environments should be done with care. They're usually pre-release versions and may still need further testing or more development.

When AngularFire v17 comes out, its trivial to replace the next version with the main one.

[lorenzbaum]

A working v17 would be fantastic, as with @next the deployment does not work (jet):

With ng build and the new builder (@angular-devkit/build-angular:application) now creating subfolders for browser and eventually server, Firebase uploads it including those folders, rendering the Angular web app corrupted.

Edit: Here is the PR for firebase-tools... this still needs to be published. https://github.com/firebase/firebase-tools/pull/6480

[sergiotome]

any update on this? @jamesdaniels , can we at least get a tentative date on when a final version for v17 could be ready?

[brandomcombr]

@angular/[email protected]

work for me

[dolanmiu]

Considering @angular/[email protected] was released 2 months ago, I have a feeling think 17 won't be released until a while longer lol (I really hope I am wrong)

[woutersteven]

Angular 17.1 is coming out soon (currently at next.2 version which adds support for TypeScript 5.3. Perhaps AngularFire will add support for TypeScript 5.3 as well and that's what they're working on / waiting for. I did read a GitHub issue before suggesting they were working on refactoring to newer versions of TypeScript. For me the pre-release version of AngularFire (as mentioned above) is working with the latest versions of the @angular packages.

[woutersteven]

I saw that @angular/fire v17 has been released, I've tried it (replaced the pre-release version) and everything seems to be working on my end. I'll do a few more tests and report issues as I encounter them. Thanks guys!

[DimitriTsikaridze]

I think normal SPA app would work fine, I'm have angular with ssr enabled, previously I used it only as SSG, I didn't want to pay for server so I built my routes during build time, however now when I do ng deploy I get 'firebase deploy error, Error: Failed to list functions for (project name)' error when I don't use functions, is there any option to disable full ssr yet? I only want SSG

[adamgasiorek]

For me update doesnt work i have following error: require() of ES Module /Users/adamg/WebstormProjects/testng/node_modules/inquirer/lib/prompts/base.js from /Users/adamg/WebstormProjects/testng/node_modules/inquirer-autocomplete-prompt/index.js not supported. Instead change the require of base.js in /Users/adamg/WebstormProjects/testng/node_modules/inquirer-autocomplete-prompt/index.js to a dynamic import() which is available in all CommonJS modules.

[DenysRakhuba]

Hello, Any updates on this? Does it work already with Angular 17 without issues? I'm asking because the issue is still "Open"

[DimitriTsikaridze]

when I try deploying, I get errors for no cloud functions found, even tho I'm using ng deploy --ssr false, I only want to prerender pages at build time but can't deploy.

[onyet]

For me update doesnt work i have following error: require() of ES Module /Users/adamg/WebstormProjects/testng/node_modules/inquirer/lib/prompts/base.js from /Users/adamg/WebstormProjects/testng/node_modules/inquirer-autocomplete-prompt/index.js not supported. Instead change the require of base.js in /Users/adamg/WebstormProjects/testng/node_modules/inquirer-autocomplete-prompt/index.js to a dynamic import() which is available in all CommonJS modules.

I have the same problem.

[ohabash]

For me update doesnt work i have following error: require() of ES Module /Users/adamg/WebstormProjects/testng/node_modules/inquirer/lib/prompts/base.js from /Users/adamg/WebstormProjects/testng/node_modules/inquirer-autocomplete-prompt/index.js not supported. Instead change the require of base.js in /Users/adamg/WebstormProjects/testng/node_modules/inquirer-autocomplete-prompt/index.js to a dynamic import() which is available in all CommonJS modules.

same

[rafazf]

Para mí la actualización no funciona, tengo el siguiente error: require() of ES Module /Users/adamg/WebstormProjects/testng/node_modules/inquirer/lib/prompts/base.js from /Users/adamg/WebstormProjects/testng/node_modules/inquirer-autocomplete-prompt/index.js not supported. Instead change the require of base.js in /Users/adamg/WebstormProjects/testng/node_modules/inquirer-autocomplete-prompt/index.js to a dynamic import() which is available in all CommonJS modules.

Alguna solucion? tengo el mismo error

[askeric]

Hi @DimitriTsikaridze .. what was the resolution for close? Fixed, dupe, won't fix, etc? I didn't see any recent checkins. Any other update? Ty!

[DimitriTsikaridze]

it just works now, I think after couple of updates error went away. currently using these versions and everything works.

 "dependencies": {
    "@angular/animations": "^17.2.0",
    "@angular/cdk": "^17.2.2",
    "@angular/common": "^17.2.0",
    "@angular/compiler": "^17.2.0",
    "@angular/core": "^17.2.0",
    "@angular/fire": "^17.0.1",
    "@angular/forms": "^17.2.0",
    "@angular/material": "^17.2.2",
    "@angular/platform-browser": "^17.2.0",
    "@angular/platform-browser-dynamic": "^17.2.0",
    "@angular/platform-server": "^17.2.0",
    "@angular/router": "^17.2.0",
    "@angular/ssr": "^17.2.2",
    "@ngneat/transloco": "^6.0.4",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "swiper": "^11.0.7",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },