angularfire icon indicating copy to clipboard operation
angularfire copied to clipboard

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

Open celestius0 opened this issue 1 year ago • 3 comments

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

celestius0 avatar May 29 '24 23:05 celestius0

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

clydin avatar May 30 '24 13:05 clydin

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?

celestius0 avatar May 30 '24 21:05 celestius0

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

8th-block avatar Jun 08 '24 14:06 8th-block