CODEWITHSUNDEEP
angularionic-frameworkangular-routing
Souf
Souf

Reputation: 33

How to fix component not loading in Angular Ionic

I'm trying to lazy load a component in ionic Angular and I've gotten the route (../app/buildings/:buildingId) to not throw errors when i navigate to it but it doesn't load the proper component in.

I think it's defaulting to the parent, but i don't know how to fix it.. I've tried some things (not lazy loading / putting it all in the app.module) but i can't seem to fix it. Any help is appreciated.

tabs.router.module.ts

 {
    path: 'app',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'buildings',
        children: [
          {
            path: '',
            component: Tab2Page,
            resolve: {buildings: BuildingResolverService},
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        ...

tab2.module.ts

export const tab2Routes: Routes = [
  {
    path: ':buildingId',
    component: BuildingComponent
  }
];
@NgModule({
  exports: [RouterModule],
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild(tab2Routes)
  ],
  declarations: [
    BuildingComponent
  ]
})
export class Tab2PageModule {}

Going to /buildings loads the proper component, /buildings/1 does not. I would expect the second route to do the same, I think it's defaulting to the first one because that one matches too maybe? i'm not sure how to fix it if that is the case.

I hope I've been clear enough

Upvotes: 3

Views: 1001

Answers (2)

AVJT82
AVJT82

Reputation: 73357

Your tab2Routes should have route '' as your default Tab2Component and :buildingId as the BuildingComponent (like you already have):

export const tab2Routes: Routes = [
  { 
    path: '', 
    component: Tab2Page 
  },
  {
    path: ':buildingId',
    component: BuildingComponent
  }
];

Upvotes: 3

Franck Abgrall
Franck Abgrall

Reputation: 141

Lazyload in Ionic is quiet different from a standard Angular project. Lazy loading is automatically setted up by the ionic page system. You can find more informations here.

Upvotes: 1

Related Questions