Ionic 5 Tab Routing Issue - appreciate some help!

I’ve been struggling with this problem for a couple of days now and would really appreciate some help if anybody can offer any assistance!

I have an Ionic 5 side-menu application and a couple of those menu options open up tabbed components i.e my application is not a tabbed application at root, rather it opens up tabbed components in a couple of places.

One of these routes is “payments” so in my app-routing.module.ts I have this:

{
    path: "payments",
    loadChildren: () =>
      import("./features/payments/tabs/payments-tabs.module").then(
        (m) => m.PaymentsTabsPageModule
      ),
  }

In my payments-tabs-routing module I have this (I have removed some of the tabs to keep things simple here):

const routes: Routes = [
  {
    path: "",
    component: PaymentsTabsPage,
    children: [
      {
        path: "tab1",
        children: [
          {
            path: "",
            loadChildren: "../to-pay/to-pay.module#ToPayPageModule",
          },
         ],
      },
      {
        path: "",
        redirectTo: "tab1",
        pathMatch: "full",
      },
    ],
  },
];

When I run ionic serve and I take the payments menu option which routes to “payments” I get the following error:

Error: Cannot find module '../to-pay/to-pay.module'

If I then, with ionic serve still running, edit the payments-tabs-routing module and just make any change i.e add a blank line at the end or something and then save it, then the payments option will work fine and all the tabs work ok. It will only go wrong again if I stop and restart ionic serve.

I’m guessing this is some sort of lazy loading issue but I’m not entirely sure what I am doing wrong and have tried some many things to get it to work I’m now going a bit crazy (when I launch the app on a device it fails with the same error). Does anyone know what I need to do to get this setup to work?

Many thanks.

Why not just move this to dynamic imports as well? it will give you better editor help and could resolve this issue

Hi Mike - thanks for taking the time to look. Do you mean just add it to the imports to make sure the path is correct? I did that and the path is fine - and presumably the fact that it works once I save the file after the error occurs shows that its right? Or did you mean something else?

Actually @mhartington can you explain what you mean by adding it to dynamic imports as maybe I’m misunderstanding?

 loadChildren: () => import("../to-pay/to-pay.module").then(m => m.ToPayPageModule),
2 Likes

@mhartington thank you so much! that has solved my problem - you’re a star! :grinning: