Angular fails to show route after successful login

Within my application, I have divided it into two areas: the admin area (referred to as iwti) and the 'retaguarda' area. The 'retaguarda' section is functioning correctly, but when I navigate to the route /iwti, the layout within the <router-outlet> does not display. I tried accessing the route directly after removing the login guard, but the layout did not load either. Additionally, I have implemented an idle timer that redirects the user to the login page. However, an error message is displayed:

Error "Can not find primary outlet to load 'LoginComponent'".

I am uncertain if I am changing between the areas correctly, so I will include the relevant code below.

app.routing.module.ts

export const mainRoutes: Routes = [
    { path: 'login', component: LoginComponent },
]

app.component.html

<app-iwti *ngIf="environment.isIWTIUserAuthentication">
</app-iwti>

<app-retaguarda *ngIf="!environment.isIWTIUserAuthentication">

iwti.routing.module.ts

const iwtiRoutes: Routes = [
    { path: 'iwti', component: IwtiDashboardComponent, canActivate: [LoginGuard] },
    { path: 'iwti/funcionario', component: IwtiFuncionarioComponent, canActivate: [LoginGuard] }
]

Once a user logs in, they are directed to the router.navigate(['iwti']) route.

iwti.component.html

<header>
    <div [hidden]="!environment.isAuthenticated">
        <app-iwtinavbar></app-iwtinavbar> <!--This displays normally when logged in-->
    </div>
</header>
<div class="container" [hidden]="!environment.isAuthenticated">
    <router-outlet></router-outlet> <!--The issue might be here. If I assign a name to the outlet and reference it in the routing file, it gives an error saying it cannot find a route with that name.-->
</div>

structure

Answer №1

Ensure that your app.component.html includes a router-outlet element within the main component of each module that handles routing. It seems like both app.module and iwti.module are involved in routing in your case. While IWTI already has a router-outlet to render child routes, app.module does not have one.

To resolve this issue, you can make the following adjustment. Also, verify that your route configurations are correctly set up. Ensure that your iwti-routing.module uses forChildren instead of forRoot.

Modify app.component.html as shown below:

<app-iwti *ngIf="ambiente.isIWTIUserAuthentication">
</app-iwti>

<app-retaguarda *ngIf="!ambiente.isIWTIUserAuthentication">
<router-outlet></router-outlet>

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

A Promise is automatically returned by async functions

async saveUserToDatabase(userData: IUser): Promise<User | null> { const { username, role, password, email } = userData; const newUser = new User(); newUser.username = username; newUser.role = role; newUser.pass ...

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

I'm currently working on a basic animation project using JavaScript. I have utilized the Animation class from the Web Animation API. My goal is to create multiple instances of this class in order to animate different elements with varying values and r ...

AngularJS route not functioning as expected

I am currently utilizing angular in combination with node. I am implementing routes to redirect the page. On my html page, I have defined 2 links as follows: <!DOCTYPE html> <html > <head> <title>My Angular App!</title> ...

Activating `routerLinkActive` for multiple components

When working with Angular 2+, I have a navbar set up within an 'Articles' feature module like this: <li> <a routerLinkActive="active" routerLink="current">Current</a> </li> <li> <a router ...

Here is a way to return a 400 response in `express.js` when the JSON request body is invalid

How can I make my application send a response with status code 400 instead of throwing an error if the request body contains invalid JSON? import express from 'express' app.use(express.urlencoded({ extended: false })) app.use(express.json()) ...

Issues arise when attempting to utilize Node.js Socket.io on localhost, as the calls are ineffective in performing logging, emitting, generating errors, or executing any other actions. It has been noted that

I am in the process of developing a real-time socket.io application using Angular and Node, following the instructions provided here. I have set up the server and client connection, but unfortunately, the connection is not being established. Server Code: ...

Using Nest JS to create two instances of a single provider

While running a test suite, I noticed that there are two instances of the same provider alive - one for the implementation and another for the real implementation. I reached this conclusion because when I tried to replace a method with jest.fn call in my ...

There seems to be an issue with the request header field Authorization, as it is not permitted by the Access-Control-Allow-Headers in

My project involves using Angular 2 for the client side and Laravel 5.4 for the server side. I have set up APIs in Laravel and am making requests to them from Angular 2. In Laravel, I have configured Oauth 2 passport service to authenticate all APIs. For ...

Guide on installing MathType plugins for CKEditor 5 in an Angular 8 environment

Encountering an issue while attempting to utilize MathType in CKEditor Error message at ./node_modules/@wiris/mathtype-ckeditor5/src/integration.js 257:98 Module parse failed: Unexpected token (257:98) A proper loader may be required to handle this file t ...

Assign object properties to a constant variable while validating the values

When receiving the features object, I am assigning its values to constants based on their properties. const { featureCode, featureSubType, contentId, price, family: { relationCountsConfig: { motherCount, fatherCount, childrenCount }, max ...

How to conditionally apply a directive to the same tag in Angular 4

I am implementing angular 4 and have a directive in my template for validation purposes. However, I would like to first check if a specific condition is true before applying the directive. Currently, my code looks like this: <div *ngIf="groupCheck; els ...

encountering difficulties resolving dependency tree when attempting to generate a new Angular project

Today, I attempted to start a new Angular project using the command ng new <projectname>, but encountered the following error: npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Foun ...

Automatically dismiss modal upon submission

In the process of implementing a CRUD operation, I am trying to automatically close the modal upon submission. Using data-dismiss on the submit button only closes the modal without executing the functionality. What I need is for the functionality to execut ...

How to access a static TypeScript variable in Node.js across different files

I encountered a situation like this while working on a node.js project: code-example.ts export class CodeExample { private static example: string = 'hello'; public static initialize() { CodeExample.example = 'modified'; } ...

Master the art of iterating through an Object in TypeScript

I need help with looping through an Object in TypeScript. While the following examples work in JavaScript, I understand why they pose a problem in TypeScript. Unfortunately, I am struggling to find the correct approach to solve this issue. Am I approaching ...

Sending every piece of information to the URL may not be the most efficient approach, in my opinion

Lately, I have incorporated NodeJS into my Angular project and here is how I am currently implementing it: Node : app.get('/register/:username/:password', function(req, res){ db.collection('users').insertOne({ username: req ...

Using the map operator in an Angular 7 application with rxjs

Despite successfully compiling my code and having everything work perfectly, I encountered an error message in my IDE (Visual Studio Code) that is preventing me from deploying my app using ng build --prod: ERROR in src/app/training/training.service.ts(6 ...

The functionality of verifying the type of an item in a list using Typescript is not functioning

In my TypeScript code, I am working with a type called NameValue and another one called MixedStuff. type NameValue = { name: string; value: string }; type MixedStuff = NameValue | string; function stripTwoChars(stuffs: MixedStuff[]): string { let st ...

Primeng - Concealed dropdown values within a scrollable table header

Recently, I integrated Primeng p-table with a filter and frozen column feature (with one column being fixed while the others are movable). However, I encountered an issue with the select dropdown in the header. When I try to open the dropdown, the values a ...

Sharing data between different Angular components that are not directly related can be achieved by utilizing a service in Angular

This is the service class for managing data export class DataService { public confirmationStatus = new Subject(); updateConfirmationStatus(status: boolean) { this.confirmationStatus.next(status); } getConfirmationStatus(): Observable<any&g ...