angular / angular/angularfire

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

Open
#3,541 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
7.8k
Forks
2.2k
Avg merge
22h 28m
Merged PRs (30d)
6

Description

### 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](https://github.com/angular/angularfire/blob/master/docs/auth.md#convenience-observables) 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](https://github.com/angular/angularfire/assets/9328862/610748f5-62f6-4e9e-a485-d1ec4f19a5b5)

### 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](https://github.com/angular/angularfire/assets/9328862/f24a193d-277e-4d71-b553-be56e46745b1)

### 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](https://github.com/angular/angularfire/assets/9328862/6bc66bdf-2901-4389-8477-4bcab2940b61)
Still unsure why this is happening.

_Edit 2_
Eureka! It appears in [this commit](https://github.com/angular/angular-cli/commit/f452589e2c921448b76a138a5f34ba92ad05e297) 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.

Contributor guide

Open the contributing guide

Research direction

Start with the convenience observables documented in docs/auth.md and trace the rxfire/auth import used by the Auth module. Compare resolution under Angular CLI 18's tsconfig.json moduleResolution "bundler" with v17.1.0 and the linked Angular CLI commit; done means the observables retain their expected types under the current setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, firebase, typescript
Domain
authentication, developer-experience
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.