https://github.com/mhartington/lazy-routing-shell

https://github.com/mhartington/lazy-routing-shell

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/mhartington/lazy-routing-shell
• Owner: mhartington
• Created: 2019-06-24T23:25:33.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-09-05T02:39:22.000Z (over 4 years ago)
• Last Synced: 2024-10-26T14:00:56.443Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 340 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ionic v4 Lazy Routing Shell

This is a shell application to show how to do lazy loading in Ionic v4.

Each page of othe application is segmented into a standalone module and then referenced in the top-level `app-routing.module.ts`.

```

children: [

  {

    path: 'chores-dashboard',

    loadChildren:

      './pages/chores-dashboard/chores-dashboard.module#ChoresDashboardPageModule'

  },

  {

    path: 'my-account',

    loadChildren: './pages/my-account/my-account.module#MyAccountPageModule'

  },

  {

    path: 'activity',

    loadChildren: './pages/activity/activity.module#ActivityPageModule'

  },

  { path: 'help', loadChildren: './pages/help/help.module#HelpPageModule' },

  {

    path: 'account-details',

    loadChildren:

      './pages/account-details/account-details.module#AccountDetailsPageModule'

  }

]

```

Notice that in the `loadChildren` property of each routing declaration, we are pointing to the module file and then appending the name of the module we want to load from that file like this `chores-dashboard.module#ChoresDashboardPageModule`.

We are also setting a preloading strategy to preload all modules as quickly as possible as seen in the code below.

```

@NgModule({

  imports: [

    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

  ],

  exports: [RouterModule]

})

```

You could set this to `NoPreloading` if you did not want to preload any modules. Using one or the other should be a data-driven decision based on usage patterns and the business case for your users.