Can someone help me out here, can't get the routing to work properly, keep getting 404

Question

I am trying to route the child component through the parent, so that the child component displays on the parent component when the link inside the parent is clicked.

I've tried to follow the angular routing tutorial https://angular.io/guide/router but I can't get it to work, I also tried the method on stack overflow: angular 4 - routing within a component(child routes) not working properly

UPDATE:

1. I've added a version on stackblitz, here's the link: https://stackblitz.com/edit/angular-ksfrpn

2. I've tried changing the routing e.g. { path: 'dashboard' component: DashboardComponent } to { path: "" component: DashboardComponent }, I'm able to display the dashboard, but what I want is to display the One component within the dashboard component.

3. I'm getting a 404 when I try to get to "one component", basically I'm trying to create the url path "application/home" as the base and when dashboard is clicked you get "application/dashboard" there after on the dashboard a user can click "one" and be taken to "application/dashboard/one" where the one component will display.

app.module

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing.module';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { DashboardModule } from './dashboard/dashboard.module';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    DashboardModule,
    AppRoutingModule,


  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:      [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }

app-routing

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from "./home/home.component";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";

const routes: Routes = [
  { path: '', redirectTo: "dashboard", pathMatch: 'full' },
  { 
    path: 'dashboard', 
    loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule),
    data: {preload: true}
  },
  { path: 'home', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent }

];

@NgModule({
  imports: [    RouterModule.forRoot(
    routes,
    { enableTracing: true } // <-- debugging purposes only
  )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

dashboard.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from "./dashboard.component";
import { RouterModule } from "@angular/router";
import { DashboardRoutingModule } from './dashboard-routing.module';
import { OneComponent } from "./one/one.component";



@NgModule({
  declarations: [
    DashboardComponent,
    OneComponent
  ],
  imports: [
    CommonModule,
    RouterModule,
    DashboardRoutingModule,

  ]
})
export class DashboardModule { }

dashboard-routing.module

import { NgModule, Component } from '@angular/core';
import { Route, RouterModule } from '@angular/router';
import { OneComponent } from "./one/one.component";
import { DashboardComponent } from "./dashboard.component";

const dashBoardRoutes : Route[] = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    pathMatch: 'full',
    children: [
      {
        path: 'one',
        component: OneComponent
      }    
    ]

  }
];

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

Links

<links>
    <ul>
        <li>
            <a routerLink="/home">Home<span class="sr-only">Home</a>
        </li>
        <li>
            <a routerLink="/dashboard">Dashboard</a>
        </li>

    </ul>
</links>

What I'm trying to do is to display the 'one component' within the dashboard component.

Answer 1

Remove pathMatch: 'full' from dashBoardRoutes and it will work.

Get more details for patchMatch here: https://angular.io/api/router/Route