Angular Router only routes some routes to 404, will not route children errors to 404

Question

Currently if a user logins to my site and enters an address such as:

localhost/f0sjdf0sd

It will route them to the dashboard since it is hitting "**".

However if they hit:

localhost/test/f0sjdf0sd

It will just sit there. Note that test is a path with children being loaded. I tried adding to the test routing itself but it still did nothing.

Any ideas why?

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login.component';

// Import Containers
import { DefaultLayoutComponent } from './containers';
// MSAL import { AuthGuard } from './auth.guard';

/* MSAL */
import { BrowserUtils } from '@azure/msal-browser';
import { MsalGuard, MsalRedirectComponent } from '@azure/msal-angular';
/* MSAL END */

import { HomeComponent } from './views/home/home.component'

export const routes: Routes = [
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home',
    },
    children: [
      { path: "", redirectTo: "/home", pathMatch: "full" },
      {
        path: "home",
        component: HomeComponent,
        data: {
          title: 'Home',
        },
        canActivate: [MsalGuard], 
      },
      {
        path: 'dashboard',
        loadChildren: () =>
          import('./views/dashboard/dashboard.module').then(
            (m) => m.DashboardModule
          ),
        // MSAL canActivate: [AuthGuard],
        canActivate: [MsalGuard], 
      },
      {
        path: 'test',
        loadChildren: () =>
          import('./views/test/test.module').then(
            (m) => m.TestModule
          ),
        canActivate: [MsalGuard], 
      },
      { path: "**", redirectTo: "dashboard" },
    ],
  },
];


@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'top',
       anchorScrolling: 'enabled',
       relativeLinkResolution: 'legacy',
    // Don't perform initial navigation in iframes or popups
   initialNavigation: !BrowserUtils.isInIframe() && !BrowserUtils.isInPopup() ? 'enabledNonBlocking' : 'disabled' // Set to enabledBlocking to use Angular Universal
  })],
  exports: [RouterModule]
})

export class AppRoutingModule {}

Answer 1

You need to define the redirect path on the base level like this:

export const routes: Routes = [
{
  path: '',
  component: DefaultLayoutComponent,
  data: {
    title: 'Home',
  },
  children: [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    {
      path: "home",
      component: HomeComponent,
      data: {
        title: 'Home',
      },
      canActivate: [MsalGuard], 
    },
    {
      path: 'dashboard',
      loadChildren: () =>
        import('./views/dashboard/dashboard.module').then(
          (m) => m.DashboardModule
        ),
      // MSAL canActivate: [AuthGuard],
      canActivate: [MsalGuard], 
    },
    {
      path: 'test',
      loadChildren: () =>
        import('./views/test/test.module').then(
          (m) => m.TestModule
        ),
      canActivate: [MsalGuard], 
    },
    
  ],
},
{ path: "**", redirectTo: "dashboard" },
];

Another side note you can use: canActivateChild: [MsalGuard] above the child Array to trigger the login without declaring it in each children.