Angular 19 support

Question

Angular 19 support

servefast-cto opened this issue a year ago · 46 comments

servefast-cto commented a year ago

Title says it all :)

loneObserver1 commented a year ago

+1

istvankolumban commented 9 months ago

+1

👎2

adamusgr commented 8 months ago

Same Here

Answer 1 · 2024-11-21T09:08:26.000Z

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

Answer 2 · 2024-11-21T09:28:38.000Z

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

Answer 3 · 2024-11-21T14:40:42.000Z

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 :)

Answer 4 · 2024-11-21T17:11:13.000Z

I upgraded and got this issue: #3580

Answer 5 · 2024-11-21T17:50:33.000Z

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/cdk@18.2.4
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/fire@18.0.1
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/lacomanda-firebase@4.3.0
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/common@18.2.[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/fire@18.0.1
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/lacomanda-firebase@4.3.0
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?

Answer 6 · 2024-11-21T19:28:45.000Z

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/cdk@18.2.4
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/fire@18.0.1
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/lacomanda-firebase@4.3.0
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/common@18.2.[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/fire@18.0.1
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/lacomanda-firebase@4.3.0
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.

Answer 7 · 2024-11-22T16:47:01.000Z

How can we help to release the 19 version sooner?

Answer 8 · 2024-11-22T17:03:44.000Z

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?

Answer 9 · 2024-11-22T20:51:03.000Z

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).

Answer 10 · 2024-11-24T07:21:09.000Z

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"
    },

Answer 11 · 2024-11-24T07:22:09.000Z

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

Answer 12 · 2024-11-25T00:48:45.000Z

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.

Answer 13 · 2024-11-26T14:10:06.000Z

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: firebase-pro@0.0.0
npm
ERR! Found: @angular/common@19.0.0
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/fire@18.0.1
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

Answer 14 · 2024-11-28T14:59:57.000Z

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.

Answer 15 · 2024-11-29T02:44:25.000Z

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.

Answer 16 · 2024-12-02T13:30:13.000Z

@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 )

Answer 17 · 2024-12-03T22:04:13.000Z

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,

Answer 18 · 2024-12-04T14:20:41.000Z

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

Answer 19 · 2024-12-04T14:26:21.000Z

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)]
}

Answer 20 · 2024-12-11T00:52:06.000Z

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?

Answer 21 · 2024-12-12T21:26:51.000Z

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

Answer 22 · 2024-12-12T21:29:27.000Z

@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.

Answer 23 · 2024-12-12T21:34:47.000Z

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.

Answer 24 · 2024-12-12T23:37:26.000Z

@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.

Answer 25 · 2024-12-14T04:53:13.000Z

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.

Answer 26 · 2024-12-15T19:02:54.000Z

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.

Answer 27 · 2024-12-16T14:12:31.000Z

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.

Answer 28 · 2024-12-17T20:05:26.000Z

Angular 19 was released a long time ago now

Answer 29 · 2024-12-18T15:43:29.000Z

@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.

Answer 30 · 2024-12-18T16:02:57.000Z

@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.

Answer 31 · 2024-12-18T16:17:58.000Z

@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

Answer 32 · 2024-12-19T10:35:50.000Z

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....

Answer 33 · 2024-12-19T18:35:17.000Z

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

Answer 34 · 2024-12-24T20:10:24.000Z

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.

Answer 35 · 2025-01-07T00:32:26.000Z

Is the holiday freeze still freezing?

Answer 36 · 2025-01-14T17:35:48.000Z

Is the holiday freeze still freezing?

+1

Answer 37 · 2025-01-15T17:20:37.000Z

We've thawed out. Have a couple small improvements to make before releasing final, hope to get that out today or tomorrow. With some fast follows next week.

Answer 38 · 2025-01-17T14:02:58.000Z

I have errors when updating from 18 to 19 version:
"dependencies": {
"@angular-eslint/schematics": "19.0.2",
"@angular/animations": "19.1.0",
"@angular/cdk": "19.1.0",
"@angular/common": "19.1.0",
"@angular/compiler": "19.1.0",
"@angular/core": "19.1.0",
"@angular/forms": "19.1.0",
"@angular/material": "19.1.0",
"@angular/material-luxon-adapter": "19.1.0",
"@angular/platform-browser": "19.1.0",
"@angular/platform-browser-dynamic": "19.1.0",
"@angular/router": "19.1.0",
"@ngneat/spectator": "19.0.0",
"@ngx-translate/core": "16.0.4",
"@ngx-translate/http-loader": "16.0.1",
"ag-grid-angular": "33.0.4",
"ag-grid-community": "33.0.4",
"chart.js": "^4.4.7",
"fast-json-stable-stringify": "^2.1.0",
"lodash": "^4.17.21",
"luxon": "3.3.0",
"luxon-angular": "6.0.0",
"ng-click-outside": "9.0.1",
"ngx-cookie-service": "19.0.0",
"rxjs": "7.5.0",
"tslib": "2.3.0",
"uuid": "9.0.1",
"zone.js": "0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "19.1.0",
"@angular-eslint/builder": "19.1.0",
"@angular-eslint/eslint-plugin": "19.1.0",
"@angular-eslint/eslint-plugin-template": "19.1.0",
"@angular-eslint/template-parser": "19.1.0",
"@angular/cli": "19.1.0",
"@angular/compiler-cli": "19.1.0",
"@types/chart.js": "^2.9.41",
"@types/jasmine": "5.1.1",
"@types/json-stable-stringify": "1.0.35",
"@types/lodash": "^4.14.182",
"@types/luxon": "3.3.0",
"@types/node": "14.18.12",
"@types/uuid": "^9.0.1",
"@typescript-eslint/eslint-plugin": "5.44.0",
"@typescript-eslint/parser": "5.44.0",
"eslint": "8.57.0",
"eslint-config-airbnb-typescript": "17.1.0",
"eslint-config-prettier": "9.0.0",
"eslint-plugin-import": "2.29.0",
"eslint-plugin-jasmine": "4.1.3",
"eslint-plugin-prettier": "4.2.1",
"husky": "4.3.8",
"jasmine-core": "5.3.0",
"karma": "6.4.2",
"karma-chrome-launcher": "3.2.0",
"karma-coverage": "2.2.1",
"karma-jasmine": "5.1.0",
"karma-jasmine-html-reporter": "2.1.0",
"lint-staged": "13.2.0",
"ng-mocks": "14.13.1",
"ng-packagr": "19.1.0",
"prettier": "2.8.0",
"typescript": "5.5.4"
}

Answer 39 · 2025-02-13T03:51:31.000Z

Any news on this? Things still failing with ng add or npm install on an existing NG 19.1 app

Answer 40 · 2025-03-18T18:37:25.000Z

Here is my experience:

After several long waits for stuff like this, I decided to move to flutter.

What a smart move... everything is more stable and the dev environment is perfect

Answer 41 · 2025-03-18T22:15:06.000Z

@Mayocampo @adamusgr I've been running "@angular/fire": "^19.0.0-rc.4" in production with zero issues since it was confirmed/mentioned by @lukaselmer #3581 (comment)

Usage in app.config.ts

provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),

What a smart move... everything is more stable and the dev environment is perfect

@aronrodrigues from a 3+ year flutter dev, you might find yourself eating those words some day :)