Unable to get sub routes working and/or loading properly

@vitonimal wrote:

Hello! I am trying to give my router some structure. I know that this might be only Angular related, so feel free to tell me I need to remove this post and share it on SO instead.

As from now, I only had a very simple router with very simple pages (each page’s module would only load a route with path ‘’ that would point to the main component. Here is an example (my home page module)

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

However, I am now working on a much more complex section of the app. Basically, I want many routes to be under a work-order route. In order to get that working, I added the following to my app-routing.module:

  {
    path: 'work-order',
    loadChildren: () => import('./pages/work-order/wo.modules').then(m => m.WorkOrderModule)
  },

Now, this is the section where I am getting a very weird issue. Here is what my WorkOrderModule looks like:

@NgModule({
  imports: [ 
    CommonModule,
    FormsModule,
    IonicModule,
    PipesModule,
    DocumentLibraryModule,
    CheckInModule,
    // TODO split in 2 modules (construction and ful.)
    RouterModule.forChild([
      {
        path: '',
        component: WorkOrderHome
      },
      {
        path: 'construction',
        component: WorkOrderCONListTabs
      }
      // {
      //   path: 'construction/form',
      //   component: WorkOrderHome // test
      // },
      // {
      //   path: 'construction/list',
      //   component: WorkOrderHome // test
      // },
      // {
      //   path: 'order-fulfillment',
      //   loadChildren: () => import('./wo-order-fulfillment/wo-of.module').then(m => m.WorkOrderOFModule)
      // }
    ])
  ],
  declarations: [ WorkOrderCONListTabs, WorkOrderCONList, WorkOrderCONForm, WorkOrderHome ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  exports: [RouterModule]

Here is what’s happening:

• If I visit localhost:8100/work-order it shows the work-order home page just as expected.
• If I visit localhost:8100/work-order/construction, I get a 404 not found and it seems like nothing gets loaded:
  

I then tried to redirect the root of work-order to the construction route, by modifying the module:

    RouterModule.forChild([
      {
        path: '',
        redirectTo: 'construction'
      },
      {
        path: 'construction',
        component: WorkOrderCONListTabs
      }

If I visit localhost:8100/work-order, I get redirected to localhost:8100/work-order/construction. The template (only a p tag for testing) does show up, but some bundles are not loaded (here is of them):

I tried to replace the module’s code with the following

      {
        path: '',
        children: [/** insert children here */]
      },

but I get the same result.

I figured out that it must be something wrong with the lazy loading and was wondering if anyone could understand that behaviour.

Thanks!

Posts: 1

Participants: 1

Read full topic