An error occurred with the AuthGuard in the AppModule following a successful login

Upon logging into the Angular app with the ASP.NET Core API app, I encountered the following error message:

Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AuthGuard]: StaticInjectorError(Platform: core)[AuthGuard]: NullInjectorError: No provider for AuthGuard!

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { routerTransition } from '../router.animations';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { first } from 'rxjs/operators';

import { AlertService, AuthenticationService } from '../_services';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
    animations: [routerTransition()]
})
export class LoginComponent implements OnInit {
    loginForm: FormGroup;
    loading = false;
    submitted = false;
    returnUrl: string;

    constructor(private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService) {}

    ngOnInit() {
        this.loginForm = this.formBuilder.group({
            username: ['', Validators.required],
            password: ['', Validators.required]
        });

        // reset login status
        this.authenticationService.logout();

        // get return url from route parameters or default to '/'
...

<p>AuthenticationService.ts</p>

...

<p>EmployeeController</p>

...

<p>app.module.ts</p>

...

<p>auth.guard.ts</p>

...

Answer №1

Feel free to enhance your AuthGuard with the following:

@Injectable({providedIn: "root"})

You can also pinpoint the precise location of your authentication guard service here

import { AuthGuard } from './_guards';

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

Generating a Dynamic Button Using SQL

I have stored the properties of my button in a database. Now, when I open my form, I want to generate a button with these properties. However, my current approach doesn't seem to be working. Should I consider using a different method? SqlCommand comm ...

The async pipe value seems to be constantly null when dealing with router events

I am facing a straightforward problem while attempting to access an asynchronous property in my template - the returned value is consistently null. This is the method I am using: someAsyncProperty():Observable<string> { return this._router.event ...

Tips on submitting JSON data to a server

I need the data to be structured like this {"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f0c3f18121e1613511c1012">[email protected]</a>","password":"1"} but it is currently appearing like this { & ...

Calling an HTTP client request with consideration for variable scope

When operating within a well-functioning cloud environment, I encounter an interesting dilemma. While inside the request1 call, I am successfully able to retrieve the output for bodydayOfTheWeek variable. However, upon venturing outside the request1 call, ...

Issue with Ionic 3 types while using the copyTo function on fileEntry

While working on my Ionic 3 app, I encountered an issue when trying to copy a file to a new directory using the Cordova plugin file. The error message states: Argument of type 'Entry' is not assignable to parameter of type 'DirectoryEntry&a ...

Angular 5 browser console displaying a communication from the server

I recently encountered an issue in Angular5 while trying to log into my account. Whenever there is a wrong password error, it displays a message in the browser console indicating server error 500. However, I do not want this message to be shown in the brow ...

Is there a way to determine the number of code lines in all TypeScript files by utilizing tslint?

Looking to retrieve line count of code in all .ts files using tslint? Is there a way to obtain the total line count of code in all .ts files with the help of tslint? I haven't been able to find any information about this feature in the ...

Insert a fresh row into the gridview using JavaScript

I am working with a grid view where I dynamically add new rows using JavaScript. Each row in the grid view contains an image (addButton), which triggers a specific JavaScript function when clicked. function AddNewRecord(e) { debugger; var hfFirst ...

Enhance your FullCalendar experience with React by displaying extra information on your calendar

I am new to using React and FullCalendar, and I have a page layout similar to the image linked below. https://i.sstatic.net/MooTR.png Additionally, I have a list of events structured as shown: id: "9", eventId: "1", ...

Exploring the creation of dynamic reactive forms with patterns generated by an API

I'm working on an Angular form group with an input field for an email address, and I need to add regex patterns for the domain extension based on what's in my database. The getAllDomain service call is already set up. However, I am unsure of ho ...

What is the best way to activate the dirty flag of an Angular form using JavaScript?

I need to update the dirty flag of a form using JavaScript by accessing its DOM element. In order to do this, I am using @ViewChild to retrieve the element and then retrieving it in the ngOnInit lifecycle method (there are different ways to achieve this s ...

Creating a function in Angular to locate each object based on its ID

Hello there, I am currently working on creating a method called findChildByIdInData(data:any, childId:string). This method will take in a JSON main node with children that have unique IDs, and the goal is to find a specific object based on the ID provided ...

Tips for delaying the execution of injected services in MVC controllers

Imagine a scenario where you have a controller that relies on a service injected by an IoC container such as autofac or ninject. Each time a request reaches the controller, the service is initialized, even if the request simply triggers a basic action that ...

Communicate between sibling components in Angular by passing the selector of one component to another

Within my project, I have two sibling components located in the SecondComponent folder. The SecondComponent consists of both the main component and its child component. Now, in the FirstComponent, I need to access the child component of the SecondComponent ...

Omit modules from the ng-bootstrap package when working with Angular 2

Is it possible to import specific components from the ng-bootstrap module into Angular 2? Currently, I have a custom tabset created using an existing ng-bootstrap component. However, upon importing ng-bootstrap, I am encountering a module duplication erro ...

How to effectively manage radio buttons in Angular 6

Here are some questions I have listed below. public QandAList = [ { question:{ id: "Q1", query:"What is the capital of France?" }, options:[ { id: "opt1", text: "Paris" }, ...

Incorporating fresh components and newly defined attributes in Angular

Is there a way for me to click on a new component button, specify a name, description, select type, and add attributes such as default value and type? I need all this information to be saved and for the new button to appear in the drag-and-drop section. ...

Is it possible to create an instance in TypeScript without using class decorators?

As per the definition on Wikipedia, the decorator pattern enables you to enhance an object of a class with additional functionalities, such as: let ball = new BouncyBall(new Ball()) The Ball object is adorned with extra features from the BouncyBall class ...

Unspecified type for 'props' parameter - a hurdle in Vue 2's composition API

I've hit a roadblock while attempting to integrate TypeScript into an existing Vue 2.6 project. Unfortunately, I'm required to stick with version 2.6 for legacy reasons. I've gone ahead and installed the composition API as a plugin. The err ...

What could be the reason for the webpack:// not showing up in Chrome after running ng build?

Greetings, I'm relatively new to Angular and have noticed a difference between using ng serve and ng build. When I use ng serve, I can see webpack:// in the Chrome debugger which allows me to navigate my TypeScript files for debugging. However, when I ...