Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
celestius0 opened this issue May 29, 2024 · 3 comments

Comments

@celestius0
Copy link

celestius0 commented May 29, 2024

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 referenced this issue in angular/angular-cli May 30, 2024
…or new projects

The `bundler` TypeScript resolution mode is now the default for all newly created
Angular CLI projects. This mode allows TypeScript to read and use any package.json
`exports` and `imports` fields found within packages including the Angular workspace.
Unlike the `node16` option value, this value does not require the use of file extensions
for each import and does not require modification of all existing application code to
use. The TypeScript language service also benefits from this option by allowing import
auto-discovery to leverage any `exports` defined for a package. This is particularly
useful for packages such as `@angular/material` which makes extensive use of secondary
package exports.

Additional information regarding this resolution mode can be found here:
https://www.typescriptlang.org/tsconfig#moduleResolution
@celestius0 celestius0 changed the title The convience observables provided by the Auth package are no longer type safe The convience observables provided by the Auth module are no longer type safe May 30, 2024
@clydin
Copy link
Member

clydin commented May 30, 2024

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

@celestius0
Copy link
Author

celestius0 commented May 30, 2024

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

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants