`Mapping child routes in Angular using basic components`

I am encountering an issue with Angular 8 routes. The problem lies in the child routes not functioning properly.

Here are my defined routes:

const routes: Routes = [
  {
    path: 'admin', component: MainComponent, children: [
      { path: 'uno', component: HomeComponent, outlet: 'sub' },
      { path: '', component: HomeComponent, outlet: 'sub' },
      //{ path: '', component: HomeComponent, outlet: 'sub' },
    ]
  }
];

When I access the URL localhost:5001/admin, both the "MainComponent" and "HomeComponent" are displayed on the browser. However, when attempting to access localhost:5001/admin/uno, I receive an error message in the console stating "Error: Cannot match any routes. URL Segment: 'admin/uno'".

Thank you for your assistance

** update **

In my app.component.html file, I have included:

<router-outlet></router-outlet>

And in the main.component.html file, I have the following code:

<div id="content" class="content">
    <div>
      <button routerLink="uno">Tab1</button>
    </div>
    <router-outlet name="sub"></router-outlet>
  </div>

Answer №1

Here are two solutions to resolve your issue. First, if you want to use named outlets, your link should be structured like this:

<button [routerLink]="[{outlets: {sub: ['uno']}}]">Tab1</button>

The second solution (which I believe is preferable in this scenario) involves removing the name from the <router-outlet> and the path configuration. By having a nested router-outlet in your MainComponent on the route /admin, all child routes will be rendered within the router-outlet of the MainComponent. You may need to include pathMatch: 'full' in your child routes.

const routes: Routes = [
  {
    path: "admin",
    component: MainComponent,
    children: [
      { path: "uno", component: HomeComponent, pathMatch: 'full'},
    ]
  }
];
<div id="content" class="content">
  <div>
    <button routerLink="uno">Tab1</button>
  </div>
  <router-outlet></router-outlet>
</div>

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 step-by-step guide for updating a minor version of Angular with Angular CLI

I've been searching online for the answer to this straightforward question, but can't seem to find it anywhere... In my angular 4 project (made with angular cli), I want to utilize the newly introduced http interceptors in version 4.3. Could so ...

When attempting to navigate using router.navigate in Angular 6 from a different component, it triggers a refresh

My routing setup is structured as follows: Main App-routing module const routes: Routes = [ { path: '', redirectTo: environment.devRedirect, pathMatch: 'full', canActivate: [AuthenticationGuard] }, { path: &a ...

Modifying the <TypescriptModuleKind> setting for typescript transpilation in project.csproj is not supported in Visual Studio 2017

I recently encountered an issue with changing the module kind used by the transpiler in Visual Studio. Despite updating the <TypescriptModuleKind> in the project's project.csproj file from commonjs to AMD, the transpiler still defaults to using ...

Create an array filled with multiple arrays containing objects

To achieve the desired array of array of objects structure, I need to populate the data like this: let dataObj = [ [ { content: "test1"}, { content: "test2"}, { content: "test3"} ], [ ...

PrimeNG Component Containing a Dynamic Dialog Instance

I am experiencing an issue with handling dynamic dialogs in PrimeNG. Is there a solution for managing actions on a dialog other than just using the close option? For instance, in the context of the Kendo-UI dialog example, I can specify the content.insta ...

Adding existing tags to Select2 in Angular2 can be accomplished by following these steps:

HTML: <select data-placeholder="Skill List" style="width:100%;" class="chzn-select form-control" multiple="multiple"> <option *ngFor="#skill of allSkills" [ngValue]="skill">{{skill}} </option> </select> TS: allSkills = [& ...

What are the steps for modifying the fields within the form?

The HTML code displays a table of todo items with options to delete or edit each entry. <tr *ngFor="let todo of todos; let i=index"> <td>{{ todo.name }}</td> <td>{{ todo.designation }}</td> <td>{{ todo.compa ...

Typescript Syntax for Inferring Types based on kind

I'm struggling to write proper TypeScript syntax for strict type inference in the following scenarios: Ensuring that the compiler correctly reports any missing switch/case options Confirming that the returned value matches the input kind by type typ ...

Chrome Not Responding to Angular5 Debugging

I'm facing an issue where I used to be able to set breakpoints in my Angular code using developer tools, and it would pause correctly. However, recently the network files are not being mapped to my local files properly. For a detailed explanation, ple ...

Dealing with React and Firebase Authentication Errors: How to Handle Errors for Existing Accounts with Different Credentials

According to the documentation at https://firebase.google.com/docs/auth/web/google-signin#expandable-1, when error.code === 'auth/account-exists-with-different-credential', signInWithPopup() should return an error.email. However, in my specific c ...

Modify the dropdown menu title dynamically based on the selection made in Angular

My Angular web-application has a dropdown menu that looks like this: <div class="btn-group" dropdown> <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">NAMEOFDROPDOWN <span class="caret"></span>&l ...

How to eliminate a particular validator from a form group in Angular

My goal is to eliminate the specific validator from the validator array so that I can reconfigure the controls when certain values have changed. I am aware of the traditional solution where I would need to repeatedly set validators. checked(event: MatC ...

Utilizing an object as a prop within React-router's Link functionality

Looking for a solution to pass the entire product object from ProductList component to Product component. Currently, I am passing the id as a route param and fetching the product object again in the Product component. However, I want to directly send the ...

Integrating d3.js into an Angular 2 project

Trying to incorporate the d3.js library into a MEAN application using angular2. Here are the steps I've taken: npm install d3 tsd install d3 In mypage.ts file (where I intend to show the d3.js graph) // <reference path="../../../typings/d3/d3.d ...

What exactly does the context parameter represent in the createEmbeddedView() method in Angular?

I am curious about the role of the context parameter in the createEmbeddedView() method within Angular. The official Angular documentation does not provide clear information on this aspect. For instance, I came across a piece of code where the developer i ...

Is it possible to visually distinguish the selected mat-grid-tile? Particularly when they are being created dynamically

On the user interface, I have a dynamic display of mat-grid-tile within a mat-grid-list. These tiles change in number and data based on backend values. When a user clicks on a mat-grid-tile, it triggers a function that receives the tile's data. My goa ...

Instructions for incorporating a TypeScript type into a Prisma model

I am trying to incorporate a Type Board into one of my Prisma models. However, I am encountering an error stating that "Type 'Board' is neither a built-in type, nor refers to another model, custom type, or enum." Can someone provide guidance on h ...

Using the appropriate asynchronous action in Redux with the Redux-Thunk middleware

While learning middleware redux-thunk, I created a simple React App. However, I am facing a transpilation issue due to an incorrect type of async action fetchPosts in the interface PostListProps. Below is the code snippet of the functional component where ...

Having trouble rendering a Twitter timeline on an Angular 7 project

I am attempting to embed a Twitter timeline in an Angular page by following the instructions outlined at . However, I am encountering an issue where only the button renders and not the actual timeline itself. The code in my index.html file is as follows: ...

Tips for waiting for an Http response in TypeScript with Angular 5

Is it possible to create a function that can retrieve a token from a server, considering that the http.post() method generates a response after the function has already returned the token? How can I ensure that my function waits for the http.post() call t ...