Angular lazy routes children aren't being found-CodePudding

I just started working on learning angular routes with lazy loading and loading components in auxiliary router-outlets. Initially working with /(aux-name:path) to add to the auxiliary route. This worked great. I am trying to modify to use a simple path and the auxiliary router-outlet being defined in the respective routing.module.

In my app-router.component.ts

const rootRoutes: Routes = [
  {
    path: '', 
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule),
    data: {
      title: 'Mako Reservations, LLC' 
    }
  },
  { 
    path: 'admin',
    loadChildren: () => import('./landing-page/landing-page.module').then(m => m.LandingPageModule),
  },

Nothing fancy. The landing-page will show. The landing page has an auxiliary route. When using the url to include (sidebar:) it worked as expected. Some of the lazy loaded modules' components work but the child paths in those routes cannot be found.

landing-page-routing.module.ts

const landingRoutes: Routes = [
    {
        path: "",
        component: LandingPageComponent,
        children: [
            {
                path: "dashboard",
                loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
            },



            {
                path: "accounts",
                pathMatch: 'full',
                loadChildren: () => import('../account/accounts.module').then(m => m.AccountModule)
            },
            {
                path: "account",
                pathMatch: 'full',
                loadChildren: () => import('../account/accounts.module').then(m => m.AccountModule)
            },
        ]
    },
    {
        path: '**',
        component: PageNotFoundComponent
    },
];

@NgModule({
  imports: [CommonModule, RouterModule.forChild(landingRoutes)],
  exports: [RouterModule]
})
export class LandingPageRoutingModule { }

There are two paths to the account module. This was chosen as as logically I could view multiple accounts or edit or create a single account. No other purpose other than to allow two different paths to be used to access the same components.

In the account-routing.module.ts, I have the following routes.

const accountRoutes: Routes = [
    {
        path: "",
        component: ManageAccountsComponent,
        outlet: 'sidebar',
        children: [
            {
                path: "create",
                pathMatch: 'full',
                component: EditAccountComponent,
                outlet: 'sidebar',
            },
            {
                path: "id/:id",
                pathMatch: 'full',
                component: EditAccountComponent,
                outlet: 'sidebar',
            },
        ]
    },
    {
        path: '**',
        component: EditAccountComponent,
        outlet: 'sidebar',
    },
];

When I run locally, I can access the landing-page (localhost:4200/admin) and I can click the link to get to the accounts page (localhost:4200/admin/accounts).

Problem is when I attempt to edit an account (http://localhost:4200/admin/account/id/5), I am directed to the page not found component. I have attempted to modify the pathMatch.

Do you have any idea on what I may be doing wrong with my lazy loaded paths?

Thank you in advance.

CodePudding user response：

I am guessing you wanted to load in the main router but copied in the sidebar outlet.

        path: "",
        component: ManageAccountsComponent,
        outlet: 'sidebar', <--- prorabably just remove this.
        children: [

else i cannot see ouw you would reach the id/:id i guess its the same for create ?

CodePudding user response：

I believe it wraps around the pathMatch as noted by Henrik. When attempting to make the change suggested didn't work, I reordered the child routes to be siblings BUT I also had to put the path: '' as the last element prior to the '**'. It then is opening the correct components on the routes as expected.

From

const accountRoutes: Routes = [
    {
        path: "",
        component: ManageAccountsComponent,
        children: [
            {
                path: "create",
                component: ManageCouponsComponent,
            },
            {
                path: "id/:id",
                component: ManageCouponsComponent,
            },
        ],
    },
    {
        path: '**',
        // component: ManageCouponsComponent
        redirectTo: '/login'
    }
];

To:

const accountRoutes: Routes = [
    {
        path: "create",
        component: EditAccountComponent,
    },
    {
        path: "id/:id",
        component: EditAccountComponent,
    },
    {
        path: "",
        component: ManageAccountsComponent,
    },
    {
        path: '**',
        // component: ManageCouponsComponent
        redirectTo: '/login'
    }
];