Skip to content

7_Implementin lazy loading and Routing

Mukesh Rathore edited this page Apr 12, 2020 · 3 revisions

step1: creating routing module at application level

Please note while we had generated application, we had used --routing flag with it to create app-routing.module.ts with empty routes. code goes here

step2: create different modules level1 along with --routing

use ng g m <module_name> --routing command to create modules with routing. Please note that this is a shell module because under-neath it we will create further modules which will be loaded whenever required.
code goes here

  • Please note that we don't have to import newly created modules in app.module.ts or app-routing.module.ts
  • Declaring 'PageNotFoundComponent' and 'AccessDeniedComponent' not required in inner modules and further down as app routing will take care of wrong/unreachable routes.

step3: create modules under modules level1

again same as step2, we will create routing along with modules.this routing will have components uder routes array.
const routes:Routes=[{path:ROUTE_CONSTANTS.DEFAULT_ROUTE,redirectTo:ROUTE_CONSTANTS.SEARCH_ROUTE,pathMatch:ROUTE_CONSTANTS.PATH_MATCH_FULL},{{path:ROUTE_CONSTANTS.SEARCH_ROUTE,component: HelperComponent}]
in the above routes,we have HelperComponent which is an individual component route. which is a base component for exception helper module. we will have search and details compoenents under modules level1 base component. we have used below route-constants in above routes:
export const ROUTE_CONSTANTS = {DEFAULT_ROUTE:'',PATH_MATCH_FULL:'full',WILDCARD_ROUTE:'**',ACCES-DENIED_ROUTE:'access-denied',SEARCH_ROUTE:'search'}

Accessing routes in Navigation/Navbar

Below code demonstrate route for single main menu. In similar sense, we can create routes for other main menu items. code goes here