The <router-outlet> in Angular is duplicating the parent component on the page

My issue involves a parent component called RemoteMpnitoringOverviewComponent and a child component called FilterIncidentsComponent, which appears as a modal. However, I am facing the problem of the parent component being displayed twice on the screen. I have attempted to resolve this by following the advice provided in this Angular forum thread, but unfortunately, the problem persists.

const routes: Routes = [
  {
    path: '',
    canActivate: [MsalGuard],
    canActivateChild: [MsalGuard],
    component: RemoteMonitoringOverviewComponent,
    children: [
      {
        path: '', component: RemoteMonitoringOverviewComponent, children: [
          { path: 'filter', component: FilterIncidentsComponent },
        ]
      }
    ]
  },
  { path: '**', redirectTo: '' },
];

Answer №1

To simplify the code in the first nested level, it is recommended to use "redirectTo" instead of assigning the component twice. Here is an example of how you can do this:

const routes: Routes = [
  {
    path: '',
    canActivate: [MsalGuard],
    canActivateChild: [MsalGuard],
    component: RemoteMonitoringOverviewComponent,
    children: [
      {
        path: '', redirectTo: 'filter', pathMatch: 'full', children: [
          { path: 'filter', component: FilterIncidentsComponent },
        ]
      }
    ]
  },
  { path: '**', redirectTo: '' },
];

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

Serving sourcemaps for a web extension in Firefox: A step-by-step guide

Currently in the process of developing a web extension using TypeScript, I have encountered an issue with sourcemaps not loading properly. The use of parcel to bundle my extension has made the bundling process simple and straightforward. However, while the ...

What is the best way to display multiple HTML files using React?

Looking to develop a web application using React that consists of multiple HTML pages. For instance, login.html and index.html have been created and linked to URIs through the backend - resulting in localhost:8080/login and localhost:8080/index. However, R ...

I am looking to display data in Angular based on their corresponding ids

I am facing a scenario where I have two APIs with data containing similar ids but different values. The structure of the data is as follows: nights = { yearNo: 2014, monthNo: 7, countryId: 6162, countryNameGe: "რუსეთის ...

Using private members to create getter and setter in TypeScript

Recently, I developed a unique auto getter and setter in JavaScript which you can view here. However, I am currently unsure of how to implement this functionality in TypeScript. I am interested in creating an Object Oriented version of this feature if it ...

The Windows platform is not recognizing the --port option when using ng serve

When running ng serve in Windows, it doesn't recognize the --port option. However, I found that it works if I use npm run ng serve --port portnumber and it always defaults to 4200: oml005@W7-2UA532159M MINGW64 /d/COT-TF/cot-web/cot-web (master) ng ...

Is it possible to import a custom module after an Angular 2 app has been bootstrapped?

I'm currently in the process of developing a business web application using Angular2 that is based on a web API. But I've encountered a challenge. My goal is to bootstrap my Angular2 app using AuthModule, which is a custom module I have created. ...

Even when it appears to be chaotic, the TypeScript array of numbers always manages to find its way back to being sorted

I recently developed a function that aims to verify if an array of numbers is sorted: const checkIfSorted = (numbers: number[]) => { return numbers === numbers.sort((a, b) => a - b); }; checkIfSorted([4, 2, 8, 7, 3, 10, 1, 5, 9, 6]); // This cur ...

Is there a way to seamlessly share TypeScript types between my Node.js/Express server and Vite-React frontend during deployment?

I'm currently tackling a project that involves a Node.js/Express backend and a Vite-React frontend. My goal is to efficiently share TypeScript types between the two. How should I configure my project and build process to achieve this seamless type sha ...

Error message: "Function call failed in Angular model getter"

Here is the structure of my model: export class User { public username: string; private email: string; constructor() { this.username = undefined; this.email = undefined; } public getUsername(): string { return this.u ...

The latest release of Angular2, rc1, eliminates all parameters that are not in

In the previous beta version, I was able to analyze using split Location.path(), but now it seems to have been removed. How can I prevent this removal? Interestingly, everything works well with matrix parameters (;id=123;token=asd). This was tested on a ...

What measures can be taken to restrict users from reaching a page by directly typing the URL?

Is there a way to block users' direct access to a specific page by typing the URL in the address bar? The URL in question is /paymentsuccess as part of the Stripe integration. How can I restrict all users from reaching this page? There is an addition ...

How to effectively implement form-control with mat-radio-group?

UPDATE: Check out my code on stackblitz I'm facing an issue with my form layout. The form control rows are overlapping with the radio button rows. I need help to resolve this problem. Here is a snippet of my code: <form [formGroup]="formGroup" (n ...

The value in reactive forms is represented as an object containing the key "value" with the corresponding value of "therealname", instead of just being the string "therealname"

Snippet Example: <div>name: {{fg.get('name').value | json}}</div> When I set up the reactive form with #1 this code snippet: this.fg = this.fb.group({name: "myname"}); The result in the div is, name: myname #2 However, using e ...

Encountering Issues with NextJS Dynamic SSR: Mobile Devices stuck on loading screen

Issue: The dynamic import feature of Next JS is encountering loading issues specifically on mobile browsers such as Google Chrome and Safari on IOS. Strangely, the functionality works smoothly on desktop browsers like Google Chrome and Mozilla. The projec ...

Could someone please help me identify the mistake in this code? I recently created a new class, imported it into a .ts file, and then proceeded to define

Upon checking the console, an error message appeared stating that Recipe was not defined. To resolve this issue, I made sure to include the necessary class definition in a separate file at the end of my code. The import statement: import { Recipe } from ...

Tips for passing a function and an object to a functional component in React

I am struggling with TypeScript and React, so please provide clear instructions. Thank you in advance for your help! My current challenge involves passing both a function and an object to a component. Let's take a look at my component called WordIte ...

The use of the `/deep/` combinator in CSS has been phased out and is set to be completely removed

After updating my angular to version 4.0.0 and chrome to 62.0.3202.94, I encountered the following error message: [Deprecation] /deep/ combinator in CSS is deprecated and will be removed in M63, around December 2017. Refer to for more information. The ...

Why is my React component not being updated with Routes?

I'm new to using react-router and I'm struggling with it for the first time. Here is the code snippet: App.tsx import React from 'react'; logo = require('./logo.svg'); const { BrowserRouter as Router, Link, Route } = require ...

How can I modify the ngx-datatable pager component to display text instead of icons and include a totalVisible property?

I am currently customizing the datatable-pager in ngx-dataTable and have been successful in adding footers and pagers. However, I am facing two issues that need resolution: How can I display text instead of icons for the prev/Next/First and Last buttons? ...

Challenges Faced with Implementing Active Reports in Angular 9

After following all the necessary steps outlined in this website to integrate Active Reports with Angular 9 (), I encountered an error when trying to compile my app: ERROR in The target entry-point "@grapecity/activereports-angular" has missing dependen ...