Encountered an issue while attempting to retrieve Observable.fromPromise for Angularfire's login functionality

I am currently working on implementing login functionality using Angular and Firebase. My goal is to receive the login result as an observable from my Auth service in the login component. However, I am encountering a specific error which is displayed below:

ERROR in src/app/login/login.component.ts:28:6 - error ng6002: appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

Below is the TypeScript file for my login component:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { AuthService } from '../services/auth/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  public form: FormGroup;
  constructor(private formBuilder: FormBuilder, private authService: AuthService, private router: Router) { 
    this.form = this.formBuilder.group( {
      email: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  ngOnInit(): void {
  }

  login() {
    const inputValue = this.form.value;
    console.log(inputValue.email, inputValue.password);

    this.authService.login(inputValue.email, inputValue.password)
    .subscribe(
      success => this.router.navigate(['/user/home']),
      error => alert(error)

    );
  }

Here's my authentication service TypeScript file:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { from as fromPromise, Observable} from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private afauth: AngularFireAuth) {

   }

   login(email, password): Observable<any> {
    return Observable.fromPromise(
      this.afauth.signInWithEmailAndPassword(email, password)
    );
  }

}

Answer №1

It seems that you accidentally placed the LoginComponent in the wrong array within the @NgModule declaration. Make sure to move it from the imports array to the declarations array as shown below:

@NgModule({
  imports: [/*LoginComponent*/], // <= remove from here
  declarations: [LoginCompoennt] // <= add here

  ...
})
export class AppModule {}

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

Guide to updating the canvas in Chart.js based on a user-defined x-axis range

What I currently have: My chart.js canvas displays values on the x-axis ranging from 1 to 9. Users can input a new range to view a different scope, with default limits set at start = 3 and end = 6 in my repository. I already have a function that restrict ...

Configure NODE_OPTIONS to set the maximum old space size for an Angular application to Nx

In my Angular application within an Nx workspace, I am utilizing the @nx/angular:webpack-browser executor for building. "build": { "executor": "@nx/angular:webpack-browser", ... } This is a sizable application that necessita ...

Guide on maintaining Spring Security authentication across Angular front-end

Following the initial feedback on my query, I made adjustments to my Spring Security setup and successfully logged in and accessed a test endpoint using Postman. However, when the same endpoint is called by Angular post successful login, the request fails, ...

How can we transform an object into an array using Typescript generics?

Can someone help me with this function? export const ObjectToArray = <T>(object: T): { key: unknown; value: unknown }[] => Object.entries(object).map(o => ({ key: o[0], value: o[1] })); I'm trying to remove the any part from the result ...

Utilize Angular's *ngFor to showcase distinct "category" values along with the lowest price for each individual category

I have an array containing objects with properties such as "category" and "price" in my Angular application. My goal is to display only unique values of the "category" property (for example: Economy, Premium, Deluxe) along with the lowest price within each ...

The for loop displays only the most recent data fetched from Firebase

When using a for loop to retrieve a user's progress, I encounter an issue. In Typescript: this.userProgress = af.object('/UserProgress/' + this.currentUser + '/', { preserveSnapshot: true }); this.userProgress.subscribe(snaps ...

Error: The specified parameter name 'trackCameraPosition: true' is missing in the Flutter code

Running flutter with run -v works perfectly fine. However, when running just flutter run, an error is displayed: The following _CompileTimeError was thrown building FireMap(dirty, state: FireMapState#0f0b0): I/flutter (13678): 'package:google_tracker ...

Angular 8 Input Validation: Implementing a Directive for Number Models

Criteria for Acceptance: • Input should only accept numbers • Numbers can have two decimal places • Both point and comma are valid separators (11,00 , 12.00) • Negative numbers should not be allowed • Point and comma cannot be ente ...

What is the correct way to start a typed Object in TypeScript/Angular?

As I delve into the world of Angular and TypeScript, I am faced with a dilemma regarding how to initialize an object before receiving data from an API request. Take for instance my model: //order.model.ts export class Order { constructor(public id: num ...

Angular2 ReactiveForms: The formGroup function requires an actual instance of FormGroup

I'm having trouble with my child-formgroup not working properly. I can't seem to figure out the issue. The error message I keep seeing in the console is: "formGroup expects a FormGroup instance." Here is my Component: constructor(private _f ...

execute the angular service within the "then(function(){})" block

I have a specific requirement where I need to capture a screenshot of a view when the user clicks on a button, send it back to the backend to save as a PDF in the database, and then allow the user to download the same image. Currently, I am utilizing the D ...

Leveraging Angular 2 for incorporating jQuery-based JavaScript ajax functionality

It seems like I'm attempting to force a square peg into a round hole as I work with Angular2 and Typescript. I've created a Javascript module that serves as an API client library for the API I'm utilizing. This library simplifies tasks such ...

Disabling click events on a span tag in Angular 6: A step-by-step guide

Is there a way to disable the click event for deleting hours with the 'X' symbol based on a condition? Thank you in advance. <table navigatable class="<some_class>"> <tbody> <tr *ngFor="let item of ...

configure the environment variable NODE_ENV in a NodeJS application

I am trying to properly set process.env.NODE_ENV to 'production' in my local NestJS code. Here are the steps I have attempted: Added NODE_ENV=production to the serve script in package.json Added nx build --prod to the build script in package.jso ...

Create an array interface to begin

According to the information provided in the Handbook, it is possible to define a custom array interface with either string or number index: interface StringArray { [index: number]: string; } To demonstrate this concept, I created the following inter ...

Do arrow functions have specific implications when it comes to the context of Angular Components?

The topic of arrow functions is commonly discussed, but I've been unable to find an answer to the following scenario. Let's consider this example from an Angular 4 Directive: export class MouseParallaxDirective implements AfterViewInit { const ...

What is the best way to display data from an array using ng-container in Angular 2?

My goal is to display data from an array in an HTML table using the Section model provided below: export class Section { public id :number; public name: string; constructor(id: number, theName: string) { this.id = id; this.name ...

Retrieving both parent and child data documents from Firestore within a single Vue component

Within my Firestore database, I have a parent document along with multiple child documents. In the same component, I need to load data based on whether the user clicks on the parent or a child. The current code successfully displays the data, but it does ...

Retrieve the part of a displayed element

Presently, I am developing a modal system using React. A button is located in the sidebar and the modal is represented as a div within the body. In the render function of the main component of my application, two components are being rendered: MyModal M ...

Can JSON Web Tokens be utilized in a browser environment?

Searching for a way to parse the JWT token led me to this jsonwebtoken library https://www.npmjs.com/package/jsonwebtoken. It appears to be tailored for NodeJS. Is it feasible to utilize this library in the browser? My attempts so far have resulted in the ...