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:

I've added a version on stackblitz, here's the link: https://stackblitz.com/edit/angular-ksfrpn
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.
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.

Ferdinand Malcher Ferdinand Malcher · Accepted Answer · 2019-08-16T13:13:08

From what you included in your question, it looks like you linked to the wrong route path. You're using Lazy Loading for the DashboardModule: You defined the dashboard route in the AppRoutingModule and used loadChildren here to lazy load the DashboardModule.

Then, in the DashboardRoutingModule you put another route with the path dashboard. To reach this route you need to combine the prefix path from the AppRoutingModule (dashboard) plus the path from the actual route (also dashbaord). The result is dashbaord/dashboard – please try linking to this path with your RouterLink.

If you want this path to be just dashboard, you need to change your route paths. The one in the AppRoutingModule must remain as it is, but you can just provide an empty path for the leaf route:

{ path:  '', component: DashboardComponent }

Hope this helps! For your next question, please provide some additional information:

What does not work? Are there any error messages?
What have you tried with which effect?
A minimal reproduction in a StackBlitz project would be great!

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

2 Answers