angular / angularfire

Angular + Firebase = ❤️
https://firebaseopensource.com/projects/angular/angularfire2
MIT License
7.7k stars 2.19k forks source link

The convience observables provided by the Auth module are no longer type safe #3541

Open celestius0 opened 5 months ago

celestius0 commented 5 months ago

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

Sample data and security rules n/a

Debug output

Output from firebase.database().enableLogging(true); n/a

Screenshots typing-issue

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: properly-typed

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

clydin commented 5 months ago

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/rxfire@6.0.5/package.json

celestius0 commented 5 months ago

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?

8th-block commented 5 months ago

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