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

https://i.sstatic.net/tL9qk.png

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

When ng-test is executed in an Angular service, the function array.some is not found

After retrieving allUsers from the cache and initializing it, I then set the boolean value of specialUserExists based on a condition in allUsers using allUsers.some() (reference to the Array.prototype.some() method). service.ts @Injectable({ providedIn: ...

Sending information to components in Angular using Router

Should I pass data through the angular router to a component, or is it better to use a service? Currently, the component is receiving data in the following way: this.account = activatedRoute.snapshot.data.account ...

The Vue application is refusing to compile due to a syntax error caused by the presence of 'return' outside of a function

Upon attempting to run a build on my Vue app, I encountered the following syntax error. error in ./src/pages/Calendar.vue?vue&type=script&lang=ts& Syntax Error: 'return' outside of function. (175:4) 173 | getEventColor(event, Even ...

Ways to display Angular components depending on the query string's value

Currently I am working with Angular 4/5 and facing a task involving two components, Component 1 and Component 2. The requirement is that if the URL is http://localhost:4200/?property1=value1, Component 1 should be displayed. Similarly, if the URL is http:/ ...

Streamlining all icons to a single downward rotation

I am currently managing a large table of "auditpoints", some of which are designated as "automated". When an auditpoint is automated, it is marked with a gear icon in the row. However, each row also receives two other icons: a pencil and a toggle button. W ...

The test case for creating a component in Jasmine titled "should create" threw an error and failed with a TypeError stating: "FAILED TypeError: Cannot read property 'next' of undefined"

One of the key components in my application is responsible for fetching data from the store. @Component({ selector: 'iomt-user', templateUrl: './user.component.html', styleUrls: ['./user.component.scss'] }) export class ...

Changing data before resolving in Angular Observable

Despite my attempt to transform the data before resolving it, the subscriber is still receiving the non-transformed data. @Injectable() export class OrderService { getAll(): Observable< Array<Order> > { let url = 'http://fakea ...

Encountering an issue with NextJS 13 when utilizing the vectorstore recommended by Langchain, specifically receiving an error message stating that HNSWLib

Currently, I am building an application utilizing Langchain and OpenAI for assistance. My approach involves loading data using JSONLoader and intending to save it in a vectorstore. This way, I can provide specific answers to user queries based on the store ...

How can you incorporate TypeScript's dictionary type within a Mongoose schema?

When using TypeScript, the dictionary type format is: { [key: string]: string; } However, when I try to define a custom schema in mongoose, it doesn't work as expected. const users = new Schema({ [key: string]: String, }); I also attempted t ...

TypeScript mandates the inclusion of either one parameter or the other, without the possibility of having neither

Consider the following type: export interface Opts { paths?: string | Array<string>, path?: string | Array<string> } The requirement is that the user must provide either 'paths' or 'path', but it is not mandatory to pa ...

The 'autoComplete' property cannot be found within the 'IntrinsicAttributes & InputProps' type

I'm currently utilizing Typescript and React, but encountering the following error: Property 'autoComplete' is not found on type 'IntrinsicAttributes & InputProps'. This is how I am using the component: <Input ...

Using an Object as a parameter in a Typescript function

I am currently working on an Angular component that includes a function. Within this function, I need to pass an Object as a parameter and invoke the function with these parameters. It has been some time since I last worked with Angular, where "any" was ty ...

Creating Blobs with NSwag for multipart form data

The Swagger documentation shows that the endpoint accepts multipart form data and is able to receive form data from a client. However, the TypeScript client generated by NSwag appears to be unusable as it only accepts Blob. uploadDoc(content:Blob): Observ ...

"Encountering a glitch in the Typescript/Node API where Express routes

Encountering a peculiar issue here - when attempting to import my router from an external file and add it as a route, I keep getting this unusual error where the string appears to be enclosed in double quotes. https://i.sstatic.net/nm9Wn.png ...

Having trouble showing JSON data with Ionic 2 and Xcode?

Extracting JSON data from a JSON file in my project and viewing it using "ionic serve" on my Mac has been successful. However, I am facing an issue after building for IOS in XCode. I import the generated project into XCode as usual, but the JSON data is no ...

What is preventing me from assigning to a class variable within a $http success handler?

During the course of my project, I have encountered a perplexing situation that is difficult to comprehend. My intuition tells me that the issue lies in a peculiar nuance of javascript while I am working in TypeScript. Unfortunately, I am unable to prove t ...

nodemon failing to automatically refresh files in typescript projects

I am currently developing an app using NodeJs, express, typescript, and nodemon. However, I am encountering an issue where the page does not refresh when I make changes to the ts files. Is there a way for me to automatically compile the ts files to js an ...

The function Observable.timer in Angular rxjs is throwing an error when imported

Encountering an error in my Angular application that reads: ERROR TypeError: rxjs_Observable__WEBPACK_IMPORTED_MODULE_4__.Observable.timer is not a function at SwitchMapSubscriber.project (hybrid.effect.ts:20) at SwitchMapSubscriber.push ...

Creating smooth transitions between different components in Ionic 2 through animations

I have two components in my application. I am looking to create an animated transition between these pages. Specifically, I want to implement a flipping effect where page 1 transitions into page 2. Is there a plugin available for achieving this in Ionic ...

Leverage the power of Bootstrap 4 without incorporating its pre-built components

Is it possible to utilize Bootstrap 4 without its components? The diagram below seems to suggest otherwise, correct? My Scenarios: I need to implement Angular Material components instead of Bootstrap components. It's acceptable to use Bootstrap 4 ...