<a`routerLink`> does not navigate to the desired route

Question

I am learning angular routing. When I click on the Home/About/Dashboard link buttons (test.component.html) they display correctly <module> works! appropriately using outlet1 router-outlet. But when I click on Experiment link button the display does not happen. What am I doing wrong?

My app.components.html looks like this:

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>
  <nav>

</nav>
  <router-outlet></router-outlet>
  <div >
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-link">Link</button>
  </div>
</div>
<router-outlet name="outlet1"></router-outlet>

My app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AuthGuard } from './auth.gard';
import { ListComponent } from './list.component';
import { TestComponent } from './test/test.component';


const myModule = () => import('./my-routing/my-module').then(x => x.MyRoutingModule);
const routes: Routes = [
  { path: '', component: TestComponent },
  { path: 'experiment', loadChildren: myModule },
  {
    path: 'home',
    component: HomeComponent, outlet: "outlet1"
  },
  {
    path: 'about', canActivate: [AuthGuard],
    component: AboutComponent, outlet: "outlet1",
  },
  {
    path: 'dashboard',
    component: DashboardComponent, outlet: "outlet1"
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

My my-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from '../list.component';
import { TestComponent } from '../test/test.component';

const routes: Routes = [

  { path: '', component: ListComponent, outlet: "outlet1" },

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MyRoutingModule { }

My test.component.html looks like this:

<div class="container">
  <div class="row">
    <div class="col-2">
      <a [routerLink]="[{ outlets:{ outlet1: ['home'] }}]" routerLinkActive="active"><button type="button" class="btn btn-primary">
          Home</button></a>
    </div>
    <div class="col-2">
      <a [routerLink]="[{ outlets:{ outlet1: ['about'] }}]"><button type="button" class="btn btn-primary">
          About</button></a>

    </div>

    <div class="col-2">
      <a [routerLink]="[{ outlets:{ outlet1: ['dashboard'] }}]"><button type="button" class="btn btn-primary">
          Dashboard</button></a>
    </div>
    <div class="col-1">
      <a [routerLink]="[{ outlets:{ outlet1: ['experiment'] }}]"><button type="button" class="btn btn-primary">
          Experiment</button></a>
    </div>

  </div>
</div>

Answer 1

Your configuration in my-routing.module.ts is not correct. You configured the path for your feature module in app-routing.module.ts like

{ path: 'experiment', loadChildren: myModule }

and then you configure one path in my-routing.module.ts like

{ path: 'experiment', component: ListComponent, outlet: "outlet1" }

Like @janci already mentioned in comments your route should look currently like 'experiment/experiment' to show the ListComponent.

Why?

With the first 'experiment' the Angular router navigates to your feature module my-module. In your feature module is no root path (empty path) configured, there is only a path 'experiment' configured, this is the second one in the mentioned path.

If you configure your route in my-routing.module.ts like

{ path: '', component: ListComponent, outlet: "outlet1" }

it should work as you expect it.