Routing, Lazy Loading Modules and Multiple Layouts in Angular 8/9

Posted at: March 18, 2020 6:57 PM

In this lesson we will learn, how to create project structure and an overview with routing, lazy loading module and multiple layouts using MEAN (MySQL, Express, Angular, NodeJs). In this application we have created routing with child route and used lazy loading module routing. I have explained the concept of multiple layouts used for angular application. In this application we have used two layouts for backend and fronted.

This lesson will help to create live application using MEAN (MySQL, Express, Angular, NodeJs).

In this lesson we have explained only project structure and overview with routing, lazy loading module and multiple layouts. For Angular and NodeJs setup you can see previous lesson Integrate Angular 8 with NodeJs.

Bootstrap 4.x Integration in Angular 8/9

Install latest bootstrap.

Install latest jquery library.

Edit angular.json

Insert bootstrap.min.css into object keystyles and jquery.slim.min.js and bootstrap.min.js into object key scripts

Full code of angular.json

Create Modules

Create modules cms, auth, dashboard, product, shared for this application.

Create Components

Create some components like as header, footer, backend-header, backend-footer, default-layout, backend-layout, home, signup, login, page-not-found, dashboard

Note: remove below two components, if you have created according previous lession.

page-not-found and users

Create Routes Files.

Create two routes file src/app/routes/default-layout-routes.ts and src/app/routes/backend-layout-routes.ts for define lazy loading module routing.

Edit src/app/routes/default-layout-routes.ts and import CmsModule and AuthModule as lazy loading routing for showing contents.

Edit src/app/routes/backend-layout-routes.ts and import DashboardModule and ProductModule as lazy loadind routing and set route path of each module.

Cms Module

Edit file cms.routing.module.ts for create routes to access home page and 404 error page.

Home Component

Edit file home.component.html

Dashboard Module

Edit file dashboard.routing.module.ts for access dashboard page.

app.routing.module.ts

Edit file src/app/app.routing.module.ts.

Set route path for DefaultLayoutComponent with children DEFAULT_ROUTES

Set route path for BackendLayoutComponent with children BACKEND_LAYOUT

Set route path for 404 error page.

Layout Components

app.component.html

Edit file app.component.html with below text.

Default Layout Component

Edit file default-layout.component.html for showing all contents of default layout.

Backend Layout Component

Edit file backend-layout.component.html for showing all contents of backend layout.

Shared Module

Export components HeaderComponent, FooterComponent, BackendHeaderComponent and BackendFooterComponent for access these components in another modules.

Header Component

header.component.html

Footer Component

footer.component.html

Backend Header Component

backend-header.component.html

Backend Footer Component

backend-footer.component.html

app.module.ts

Edit file app.module.ts and import import { SharedModule } from './shared/shared.module';

Read previous lesson Integrate Angular 8 with NodeJs for details of MessageComponent, MessageService, HttpErrorHandler.

CSS

Edit file src/styles.css.

Complete Tutorial of MEAN (MySQL, Express, Angular, NodeJs)

Conclusion

In this lesson we have learnt how to create live project work flows with different modules and using multiple layouts. And children routing with lazy loading module. Used one shared module to import another module for access common component in a different module.

This lesson also available on YouTube
mean stack projects mean stack project tutorial lazy loading module routing routing lazy load module lazyload module in angular 8 multiple layouts in angular 8 mean stack project folder structure Lazy Loading Modules

More Posts - MEAN Stack

Please leave comments

1 Comments