The type 'Observable<User | null | undefined>' cannot be assigned to the type 'Observable<User>'

Having trouble setting up Google SignIn with Firestorm. The guide I used is outdated and doesn't provide the information I need.

The main issue is:

export class AuthService {
  
  user$: Observable<User>; //This Observable can be NULL or undefined.

  constructor(
        private afAuth: AngularFireAuth,
        private afs: AngularFirestore,
        private router: Router
  ) {
    

    this.user$ = this.afAuth.authState.pipe(   //this one is not assignable to null or undefined
      switchMap(user => {
          // Logged in
        if (user) {
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          // Logged out
          return of(null);
        }
      })
    )
    
   }
}

Encountering this error consistently:

Type 'Observable<User | null | undefined>' is not assignable to type 'Observable'. Type 'User | null | undefined' is not assignable to type 'User'. Type 'undefined' is not assignable to type 'User'.ts(2322)

Struggling to find a solution.

Referenced documentation that led me here:

Answer №1

When implementing your method, keep in mind that the return value may be null. Therefore, it is important to declare the user$ Observable as potentially nullable or undefined.

  user$: Observable<User | null | undefined>;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with NPM install freezing during package installations?

Hello, I am currently facing an issue with my project. It works perfectly fine, but the problem arises when I try to move the project files (except node_modules) to another folder or GitHub. The reinstallation of packages via npm always gets stuck at: ex ...

Issues with type errors in authentication wrapper for getServerSideProps

While working on implementing an auth wrapper for getServerSideProps in Next.js, I encountered some type errors within the hook and on the pages that require it. Below is the code for the wrapper along with the TypeScript error messages. It's importan ...

Angular automatically refreshes components when navigating

In my Angular project, I have encountered an intermittent bug: Occasionally, when a user clicks on a menu item that uses the "routerLink" directive, all Angular components are reloaded. However, there are instances where this should not happen (and doesn&a ...

Kindly include an @Ionic3Annotation for either @Pipe, @Directive, or @Component

During development, this code runs without any issues. However, when attempting to run it in production using the command: Working: ionic cordova run android Not working: ionic cordova run android --prod --release Error Message: [03:34:41] types ...

Angular 2 Release Candidate 1 introduces a powerful router that allows for URL rewriting capabilities

Since updating to routing rc 1, my application is encountering issues when the URL includes query string parameters. Below is the setup of the routes in the app component: import {Component, OnInit, OnDestroy } from '@angular/core'; import {RO ...

Is a service account key necessary for Firebase functions?

Just watched a video by Google Firebase team and it seems like you don't need a service account key, check it out here Has anyone been successful in getting functions to work without it? I've tried this approach: import * as v1 from "fireb ...

Oops! An issue occurred: [RunScriptError]: Running "C:Windowssystem32cmd.exe /d /s /c electron-builder install-app-deps" resulted in an error with exit code 1

query: https://github.com/electron/electron/issues/29273 I am having trouble with the installation package as it keeps failing and showing errors. Any tips or suggestions would be highly appreciated. Thank you! ...

Tips for creating type-safe expressions for @Input() in Angular 2 and above?

What's the best way to create a function using @Input() in an Angular component? For instance, when defining a method that should return a boolean value: @Input callback: //(only allow methods with boolean return value) @Input callback: Function // ...

Tips for creating a webfont using SVG icons

Seeking advice on generating a webfont from SVG icons using webpack, angular2, and typescript. Any suggestions on the best way to achieve this? Struggling to find helpful information online. Please lend a hand! https://i.sstatic.net/kvClK.png The code pr ...

Using async/await with mysql2 in Node.js can lead to undefined rows and fields

I am facing an issue where the query below is returning undefined in rows and field even though the user table has data. How can I properly use the promise version in TypeScript? Any help would be greatly appreciated. Thank you... code import mysql from ...

The declaration merging for react-table types is not functioning properly as the property does not exist on the type 'TableInstance'

While working on implementing pagination for my react-table component, I encountered a strange issue. The error message "Property X does not exist on type 'TableInstance'" is visible in the screenshot below: https://i.sstatic.net/1WpAf.png To a ...

What steps can be taken to ensure a successful request to a Node.js server when previewing an Angular app on a separate device within the same network?

My desktop computer hosts the Angular front-end on port 4200 and the Express.js back-end on port 4000. When I try to access the Angular app from my mobile Android phone using 192.168.1.X:4200, the app loads but doesn't display any data from the Expres ...

Creating a personalized installation pathway for NPM, Angular, and TypeScript on Windows operating systems

Is there a way to prevent NPM and Angular from using the folder C:\Users\XXXXXX\AppData\Roaming\npm in Windows? I am trying to globally install Node.Js and Angular on a different disk (using the command NPM i --prefix D:\MyF ...

Steps to activate Angular Progressive Web App service worker

When I set up an Angular project, I executed the following commands in the terminal: ng add @angular/pwa ng build --prod The static website output was published in the /dist folder. After running the URL through PWABuilder, it detected the manifest bu ...

Hiding the header on a specific route in Angular 6

Attempting to hide the header for only one specific route Imagine having three different routes: route1, route2, and route3. In this scenario, there is a component named app-header. The goal is to make sure that the app-header component is hidden when t ...

Subject fails to subscribe to the change

There are two components in my project that share a common service. shared.service.ts // ..... skipping top level codes private pickAnalysisForBubble = new Subject<any>(); analysisForBubble$ = this.pickAnalysisForBubble.asObservable(); mapTo ...

Tips for modifying the UserRepresentation in keycloak REST API response

Whenever we send a GET request to the following URL: https://my-keycloak/admin/realms/test-realm/users We receive a comprehensive list of users who are associated with the test-realm. According to the Keycloak REST API documentation, this kind of respons ...

Encountered an issue while constructing a Docker image for Node/NPM Angular application

I have attempted various methods to resolve this issue, but have been unsuccessful. I am working on an Angular application and have created a Dockerfile with the following code: FROM node:latest AS ng-builder RUN mkdir -p /app WORKDIR /app COPY package.jso ...

Send the component template and functions when triggering an expanded view in a material dialog

While striving to adhere to DRY coding principles, I've encountered a dilemma involving a particular use case. The task at hand is to display an expanded view of a component within a dialog box. This component presents JSON records in a paginated list ...

The lite-server is unable to find an override file named `bs-config.json` or `bs-config.js`

I've been working on running my first Angular 2 app. I carefully followed the steps provided by angular2. However, upon running the command npm start, I encountered the following error in the terminal: No bs-config.json or bs-config.js override fil ...