Angular 19 support #3581

servefast-cto · 2024-11-21T09:08:23Z

Title says it all :)

google-oss-bot · 2024-11-21T09:08:26Z

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

Ruisi-Lu · 2024-11-21T09:28:38Z

The RC version supporting Angular 19 was already released yesterday.
https://www.npmjs.com/package/@angular/fire/v/19.0.0-rc.0

StefanKern · 2024-11-21T14:40:42Z

Are there any issues with it? I saw angular 18 was released then basically the same day, so I am wondering when it will ship :)

and thank you for all the great work you are doing :)

mvergarair · 2024-11-21T17:11:13Z

I upgraded and got this issue: #3580

quedicesebas · 2024-11-21T17:50:33Z

I'm getting this:

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @angular/fire@1[8](https://github.com/esaesin/lacomanda-app/actions/runs/11958329749/job/33337612327#step:4:9).0.1
npm error Found: @angular/common@1[9](https://github.com/esaesin/lacomanda-app/actions/runs/11958329749/job/33337612327#step:4:10).0.0
npm error node_modules/@angular/common
npm error   @angular/common@"^19.0.0" from the root project
npm error   peer @angular/common@"^18.0.0 || ^19.0.0" from @angular/[email protected]
npm error   node_modules/@angular/cdk
npm error     @angular/cdk@"^18.2.4" from the root project
npm error   7 more (@angular/forms, @angular/platform-browser, ...)
npm error
npm error Could not resolve dependency:
npm error peer @angular/common@"^18.0.0" from @angular/[email protected]
npm error node_modules/@angular/fire
npm error   @angular/fire@"^18.0.1" from the root project
npm error   peer @angular/fire@"^18.0.1" from @esaesin/[email protected]
npm error   node_modules/@esaesin/lacomanda-firebase
npm error     @esaesin/lacomanda-firebase@"^4.3.0" from the root project
npm error
npm error Conflicting peer dependency: @angular/[email protected].[12](https://github.com/esaesin/lacomanda-app/actions/runs/11958329749/job/33337612327#step:4:13)
npm error node_modules/@angular/common
npm error   peer @angular/common@"^18.0.0" from @angular/[email protected]
npm error   node_modules/@angular/fire
npm error     @angular/fire@"^18.0.1" from the root project
npm error     peer @angular/fire@"^18.0.1" from @esaesin/[email protected]
npm error     node_modules/@esaesin/lacomanda-firebase
npm error       @esaesin/lacomanda-firebase@"^4.3.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

Can I deploy an app updated to Angular 19 with any workaround?

Ruisi-Lu · 2024-11-21T19:28:45Z

I'm getting this:

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @angular/fire@1[8](https://github.com/esaesin/lacomanda-app/actions/runs/11958329749/job/33337612327#step:4:9).0.1
npm error Found: @angular/common@1[9](https://github.com/esaesin/lacomanda-app/actions/runs/11958329749/job/33337612327#step:4:10).0.0
npm error node_modules/@angular/common
npm error   @angular/common@"^19.0.0" from the root project
npm error   peer @angular/common@"^18.0.0 || ^19.0.0" from @angular/[email protected]
npm error   node_modules/@angular/cdk
npm error     @angular/cdk@"^18.2.4" from the root project
npm error   7 more (@angular/forms, @angular/platform-browser, ...)
npm error
npm error Could not resolve dependency:
npm error peer @angular/common@"^18.0.0" from @angular/[email protected]
npm error node_modules/@angular/fire
npm error   @angular/fire@"^18.0.1" from the root project
npm error   peer @angular/fire@"^18.0.1" from @esaesin/[email protected]
npm error   node_modules/@esaesin/lacomanda-firebase
npm error     @esaesin/lacomanda-firebase@"^4.3.0" from the root project
npm error
npm error Conflicting peer dependency: @angular/[email protected].[12](https://github.com/esaesin/lacomanda-app/actions/runs/11958329749/job/33337612327#step:4:13)
npm error node_modules/@angular/common
npm error   peer @angular/common@"^18.0.0" from @angular/[email protected]
npm error   node_modules/@angular/fire
npm error     @angular/fire@"^18.0.1" from the root project
npm error     peer @angular/fire@"^18.0.1" from @esaesin/[email protected]
npm error     node_modules/@esaesin/lacomanda-firebase
npm error       @esaesin/lacomanda-firebase@"^4.3.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

Can I deploy an app updated to Angular 19 with any workaround?

If you wish to use the RC version, you should update it manually.

quedicesebas · 2024-11-22T16:47:01Z

How can we help to release the 19 version sooner?

quedicesebas · 2024-11-22T17:03:44Z

The RC version supporting Angular 19 was already released yesterday. https://www.npmjs.com/package/@angular/fire/v/19.0.0-rc.0

what change in the API? I'm getting this errors after upgrading:

FirebaseError: Expected type '_Query', but it was: a custom _DocumentReference object

and

FirebaseError: Type does not match the expected instance. Did you pass a reference from a different Firestore SDK?

quedicesebas · 2024-11-22T20:51:03Z

The RC version supporting Angular 19 was already released yesterday. https://www.npmjs.com/package/@angular/fire/v/19.0.0-rc.0

what change in the API? I'm getting this errors after upgrading:

FirebaseError: Expected type '_Query', but it was: a custom _DocumentReference object

and

FirebaseError: Type does not match the expected instance. Did you pass a reference from a different Firestore SDK?

Adding firebase as dependency in my project resolves the problem (it was originated by the dependency rxfire library).

Char2sGu · 2024-11-24T07:21:09Z

Add the following to your package.json overrides solves it:

    "@angular/fire": {
      "@angular/core": "$@angular/core",
      "@angular/common": "$@angular/common",
      "@angular/platform-browser": "$@angular/platform-browser",
      "@angular/platform-browser-dynamic": "$@angular/platform-browser-dynamic"
    },

Char2sGu · 2024-11-24T07:22:09Z

But, honestly, why depend on a specific major release of Angular? >=18 seems to be a much better choice that can be compatible with any future releases while requiring a minimum version

juane1000 · 2024-11-25T00:48:45Z

Add the following to your package.json overrides solves it:

"@angular/fire": {
  "@angular/core": "$@angular/core",
  "@angular/common": "$@angular/common",
  "@angular/platform-browser": "$@angular/platform-browser",
  "@angular/platform-browser-dynamic": "$@angular/platform-browser-dynamic"
},

Recommend deleting your node_modules with this workaround. Simply adding it and reinstalling didn't work.

miapppro · 2024-11-26T14:10:06Z

Hasta cuando esperaremos..

Global setting: enabled
Local setting: enabled
Effective status: enabled
√ Determining Package Manager
› Using package manager: npm
√ Searching for compatible package version
› Unable to find compatible package. Using 'latest' tag.
√ Loading package information from registry
› ‼ Package has unmet peer dependencies. Adding the package may not succeed.
√ Confirming installation
× Unable to install package

npm ERR!
code ERESOLVE
npm
ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm
ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm
ERR! @angular/common@"^19.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm
ERR! peer @angular/common@"^18.0.0" from @angular/[email protected]
npm ERR! node_modules/@angular/fire
npm ERR!
@angular/fire@"18.0.1" 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\Administracion\AppData\Local\npm-cache_logs\2024-11-26T14_08_58_245Z-eresolve-report.txt
npm ERR!
A complete log of this run can be found in: C:\Users\Administracion\AppData\Local\npm-cache_logs\2024-11-26T14_08_58_245Z-debug-0.log

bashoogzaad · 2024-11-28T14:59:57Z

For me it works just fine! (@angular/fire 19.0.0-rc.0 and firebase 11.0.2). I need to install with --legacy-peer-deps but then it works.

quedicesebas · 2024-11-29T02:44:25Z

For me it works just fine! (@angular/fire 19.0.0-rc.0 and firebase 11.0.2). I need to install with --legacy-peer-deps but then it works.

That's not working fine, because in a firebase App Hosting pipeline it's going to fail.

loneObserver1 · 2024-11-29T08:34:59Z

+1

StefanKern · 2024-12-02T13:30:13Z

@juane1000 : rxfire will install an outdated firebase version (10 instead of 11), so you also need:

  "overrides": {
    "@angular/fire": {
      "@angular/core": "$@angular/core",
      "@angular/common": "$@angular/common",
      "@angular/platform-browser": "$@angular/platform-browser",
      "@angular/platform-browser-dynamic": "$@angular/platform-browser-dynamic"
    },
    "rxfire": {
      "firebase": "^11.0.0"
    }
  },

There is a comment in rxfire, that the outdated dependency causes the angular 19 upgrade issue: FirebaseExtended/rxfire#117 (by @quedicesebas )

Ruisi-Lu · 2024-12-03T22:04:13Z

For me it works just fine! (@angular/fire 19.0.0-rc.0 and firebase 11.0.2). I need to install with --legacy-peer-deps but then it works.

That's not working fine, because in a firebase App Hosting pipeline it's going to fail.

It's not an Angularfire problem. App hosting does not support angular 19.

The message from Firebase support:


 
That is a nice catch. Thank you so much for your report. The engineering team is aware of this and it is working to support the latest Angular version as soon as possible, but currently there is no timeline for when it is ready.

 
For now, you can keep an eye out for updates on our official [blog](https://firebase.blog/) and [release notes](https://firebase.google.com/support/releases).

 
If you have any questions or run into any issues related to this case, please do not hesitate to contact me.

 
Best regards,

JGSolutions · 2024-12-04T14:20:41Z

When is this gonna be properly fixed and released for angular v19 Trying the solutions above and nothing works

JGSolutions · 2024-12-04T14:26:21Z

I even install RC version: 19.0.0-rc.0

All packages installs and able to spin off the local server but then i get this error below. Running my app on the serve side.

ERROR [_FirebaseError: Type does not match the expected instance. Did you pass a reference from a different Firestore SDK?] {
code: 'invalid-argument',
customData: undefined,
toString: [Function (anonymous)]
}
ERROR [_FirebaseError: Type does not match the expected instance. Did you pass a reference from a different Firestore SDK?] {
code: 'invalid-argument',
customData: undefined,
toString: [Function (anonymous)]
}

StefanKern · 2024-12-11T00:52:06Z

It has been three weeks and no response from the [rxfire](https://github.com/FirebaseExtended/rxfire repository. The only usage is see of rxfire is to be reexported with ɵzoneWrap, which is a bit strange already. Maybe it is time to remove the dependency to rxfire?

jamesdaniels · 2024-12-12T21:26:51Z

Rxfire is responsible for all the convenience observables, like docData, etc. so we don't want to drop. I've gotten its CI/CD dusted off and bumped the version, AFv19.0.0-rc.2 now leverages that version. I think we're getting close here

jamesdaniels · 2024-12-12T21:29:27Z

@Char2sGu we used to support a range of angular versions but that was far too much of an overhead, we also can now leverage new Angular APIs. Angular did a lot in v19 to make our lives easier, w/PendingTasks etc, so we're actually deleting a lot of code in AngularFire now. The main issue slowing us down right now is that moving over to inject() internally was a wreaking ball to our test suite.

Char2sGu · 2024-12-12T21:34:47Z

Hey @jamesdaniels I think you misunderstood me. I did not ask to support older versions of Angular. What I'm proposing is simply use the >= matcher for the version, so that when Angular updates, the developers will not be blocked from installing the latest Angular because of peer dependency conflicts.

For example, when angularfire supports Angular 19, the peer dependency should be updated to >=19, so that when Angular 20 is released, developers can easily update to Angular 20 without npm peer dep errors. angularfire can later migrate to Angular 20 and bump the peer dep to >=20.

jamesdaniels · 2024-12-12T23:37:26Z

@Char2sGu the concern there is that Angular could break us on major bumps and we need time to respond. It's no more safe that you force installing AngularFire now and ignoring peer warnings.

Our goal is release our major within 72 hours of Angular/Core but it just happened this time that we got caught in a bad spot a few days before code-freeze.

jamesdaniels · 2024-12-14T04:53:13Z

19.0.0-rc.4 is now released. Feeling good about this on. We've entered holiday code freeze so no final until after the new year but I'll cut RCs addressing feedback next week & hopefully we can hit the ground running in 2025.

Give it a spin! And file any issues. I dusted off the modular sample app to include SSR w/Authentication, zoneless cd, code-splitting on @defer, and incremental rehydration.

juane1000 · 2024-12-15T19:02:54Z

Just tried the latest update. Seems to largely work but I'm getting the following warnings/errors

Seems like any 'collection' related functions aren't zone wrapped. 'getDocument' doesn't trigger this in my testing. Functionally the data still loads and app renders fine.

jamesdaniels · 2024-12-16T14:12:31Z

Thanks for trying it out.

I'll do an assessment of our zone wraps, I took the opportunity this release to be more aggressive with warnings while in dev-mode.

These may not be problems for your app but wanted to give the tools to debug instability for those experiencing it.

I'll tweak the message and flush out the linked doc before release.

alexander-kastil · 2024-12-17T20:05:26Z

Angular 19 was released a long time ago now

jamesdaniels · 2024-12-18T15:43:29Z

@alexander-kastil it was only released 10 or so business days ago for me, sorry. We're currently in codefreeze, if rc.4 is the one it won't be released final until lifted in the new year. We have a lot of changes in this one, want to make sure we don't break over the holidays when we're all on vacation.

juane1000 · 2024-12-18T16:02:57Z

@jamesdaniels Thank you, and the team, for being very responsive through this transition. Happy to try in progress releases to stable version.

I was wondering if any of these heavy changes include the awkwardness with generics? I vividly remember after a certain version of either Firebase sdk the ngFire wrappers also stopped working with proper generics. Currently I have function utility wrappers that simply add the 'as Observable' on the return statement. It would be nice to return to not having that in the future.

jamesdaniels · 2024-12-18T16:17:58Z

@juane1000 no improvements there yet. What we did in the past was to simplify this library and better match the semantics of the native Firestore SDK. The Firestore team would rather folk use DataConverters over generics as it they provide real type safety.

We will soon be putting some efforts into DevEx as we have a bunch of improvements to SSR coming down the pipe & hoepfully will be less concerned about ZoneJS moving forward. As we work on DevEx we'll se if there's a better pattern we can provide for Angular developers or at least better document how to best take advantage of DataConverters or something like zod

DASMACHETE · 2024-12-19T10:35:50Z

Just tried the latest update. Seems to largely work but I'm getting the following warnings/errors

Seems like any 'collection' related functions aren't zone wrapped. 'getDocument' doesn't trigger this in my testing. Functionally the data still loads and app renders fine.

I am getting this for Auth and firestore, is there a way to disable that type of warning? Or what would be the workaround?
Because everything works on the backend, but the message is persistant....

rosostolato · 2024-12-19T18:35:17Z

I had this issue after updated to 19.0.0-rc.4

lukaselmer · 2024-12-24T20:10:24Z

19.0.0-rc.4 is now released. Feeling good about this on. We've entered holiday code freeze so no final until after the new year but I'll cut RCs addressing feedback next week & hopefully we can hit the ground running in 2025.

Give it a spin! And file any issues. I dusted off the modular sample app to include SSR w/Authentication, zoneless cd, code-splitting on @defer, and incremental rehydration.

Thanks for releasing 19.0.0-rc.4 @jamesdaniels. It works well for us. We are using the realtime db and auth. During development, we got the same warnings "Firbase API called outside injection context", but it doesn't seem to influence the app.

xylo04 mentioned this issue Nov 30, 2024

Upgrade to Angular 19 RMHAM/co-ares-catalog#118

Draft

jamesdaniels mentioned this issue Dec 12, 2024

Package has unmet peer dependencies. Adding the package may not succeed. #3587

Closed

jamesdaniels pinned this issue Dec 12, 2024

Angular 19 support #3581

Angular 19 support #3581

Comments

servefast-cto commented Nov 21, 2024

google-oss-bot commented Nov 21, 2024

Ruisi-Lu commented Nov 21, 2024

StefanKern commented Nov 21, 2024

mvergarair commented Nov 21, 2024

quedicesebas commented Nov 21, 2024

Ruisi-Lu commented Nov 21, 2024

quedicesebas commented Nov 22, 2024

quedicesebas commented Nov 22, 2024

quedicesebas commented Nov 22, 2024

Char2sGu commented Nov 24, 2024

Char2sGu commented Nov 24, 2024

juane1000 commented Nov 25, 2024

miapppro commented Nov 26, 2024

bashoogzaad commented Nov 28, 2024

quedicesebas commented Nov 29, 2024

loneObserver1 commented Nov 29, 2024

StefanKern commented Dec 2, 2024 • edited Loading

Ruisi-Lu commented Dec 3, 2024

JGSolutions commented Dec 4, 2024

JGSolutions commented Dec 4, 2024 • edited Loading

StefanKern commented Dec 11, 2024

jamesdaniels commented Dec 12, 2024

jamesdaniels commented Dec 12, 2024

Char2sGu commented Dec 12, 2024

jamesdaniels commented Dec 12, 2024 • edited Loading

jamesdaniels commented Dec 14, 2024

juane1000 commented Dec 15, 2024

jamesdaniels commented Dec 16, 2024

alexander-kastil commented Dec 17, 2024

jamesdaniels commented Dec 18, 2024

juane1000 commented Dec 18, 2024 • edited Loading

jamesdaniels commented Dec 18, 2024

DASMACHETE commented Dec 19, 2024

rosostolato commented Dec 19, 2024

lukaselmer commented Dec 24, 2024

StefanKern commented Dec 2, 2024 •

edited

Loading

JGSolutions commented Dec 4, 2024 •

edited

Loading

jamesdaniels commented Dec 12, 2024 •

edited

Loading

juane1000 commented Dec 18, 2024 •

edited

Loading