As a novice with Angular, I have the following routes set up.
app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FrameComponent } from './ui/frame/frame.component';
import { NotFoundComponent } from './common/not-found/not-found.component';
const routes = [
{
path: 'login',
loadChildren: 'src/app/login/login.module#LoginModule'
},
{
path: 'dashboard',
component: FrameComponent,
loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
},
{
path: "**",
component: NotFoundComponent,
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
dashboard.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { OverviewComponent } from '../overview/overview.component';
const routes = [
{
path: '',
children:[
{
path: 'overview',
component: OverviewComponent,
//outlet: 'dashboard-inside'
}
]
},
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class DashboardRoutingModule { }
When attempting to navigate to /dashboard, the FrameComponent from the AppRoutingModule loads correctly.
However, when trying to navigate to /dashboard/overview, the NotFoundComponent is displayed instead of the desired OverviewComponent from the secondary router.
I am still new to Angular and would appreciate any guidance on what I may be missing.