Unable to get sub routes working and/or loading properly

[vitonimal]

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.

UPDATE

I tried with another submodule and I still have the same issue. Here is the rouer graph

I think it could be because WorkOrderHome is not directly linked to the other routes.

Thanks!

[vitonimal]

Okay I finally found the solution. I was missing a base href tag in the index.html file. Here is the answer I gave on SO: (https://stackoverflow.com/questions/61448290/angular-8-unable-to-access-nested-routes)

Okay so I have been able to find a solution online. Here is the reference if interested.https://github.com/webpack/webpack-dev-server/issues/333

What was the issue:

The actual code that was responsible for the routing was correct (the implementation in this post as well as the other examples I have posted on the Ionic Forum.)

I was only missing a reference to the base href in the index.html file. Here is what I added in the head tag of the index.html file:

  <base href="/" />

Once this line was added, the code started to behave as expected and web pack as well.

My guess is that this line comes by default in New Ionic projects. However, since I have been migrating an app from Ionic 3 to Ionic 4, the file did not contain this line by default.