The convience observables provided by the Auth module are no longer type safe
Version info
Angular CLI: 18.0.2 Node: 22.2.0 Package Manager: npm 10.8.0 OS: linux x64
Angular: 18.0.1 ... animations, common, compiler, compiler-cli, core, fire ... forms, platform-browser, platform-browser-dynamic, router
Package Version
@angular-devkit/architect 0.1800.2 @angular-devkit/build-angular 18.0.2 @angular-devkit/core 18.0.2 @angular-devkit/schematics 18.0.2 @angular/cli 18.0.2 @schematics/angular 18.0.2 rxjs 7.8.1 typescript 5.4.5 zone.js 0.14.6
How to reproduce these conditions
Failing test unit, Stackblitz demonstrating the problem n/a
Steps to set up and reproduce
- Create a new angular app using the latest version of the cli
ng new angular18-firebase-test - Add AngularFire
ng add @angular/fire - Follow the guidance here to add the convenience observables
Sample data and security rules n/a
Debug output
** Output from firebase.database().enableLogging(true); **
n/a
** Screenshots **
Expected behavior
The convenience observables should be properly typed as they were in v17.1.0
Note in this screenshot how the IDE properly recognizes the types when using the previous release:
Actual behavior
The observables are cast as any (see screenshot).
Edit 1
Upon further investigation, it appears the problem is related to how the rxfire/auth module in this file is imported. Following the import through to the definition of the module takes me to a type definition file in v17 but instead goes to an esm module in v18. See related screenshot here:
Still unsure why this is happening.
Edit 2
Eureka! It appears in this commit the AngularCLI now defaults to setting the moduleResolution compiler option in the tsconfig.json file to "bundler" by default thus causing the module to get resolved differently. Switching back to the value of "node" allows for the proper import of typed entities but likely causes problems with the areas targeted in that aforementioned commit.
This appears to be an issue with the rxfire package. The export definitions do not specify a types condition and when combined with the file naming convention of the output files (.esm.js/.cjs.js) which prevents implicit .d.ts file discovery, TypeScript is unable to locate the type definitions and falls back to the js file itself.
Package.json from the published package: https://unpkg.com/browse/[email protected]/package.json
Nice @clydin! Looking into it, rxfire already has the appropriate updates to package.json in the main branch since Jan but a new release just hasn't been published. It appears they also already have a ticket open for this as well which I have commented on. Thanks for your help investigating :clinking_glasses:.
@jamesdaniels I'm assuming once there is a new release of rxfire we can update the dep in AngularFire and hopefully this will be resolved, no?
A temporary fix is to use the below in your tsconfig.json
"moduleResolution": "node",
once the fix has been published you can revert back to "moduleResolution": "bundler",