Angular 4 serve static html page

Issue

In my simple web application on Angular 4, I have static pages like about us, contact us etc and if this static pages included as component the size of angular app will increase.

Is there any way to display this static pages via angular app on demand?

Solution

You can use lazy loading for this.

Basic idea is to create an module for all your static pages.

This would be ideal way. They won’t be downloaded until called.

export const routes: Routes = [
  ...      
  { path: 'pages', loadChildren: './pages/pages.module#PagesModule' },
  ...
];

Import is as :

RouterModule.forChild(routes)

Where PagesModule is your module name to be lazy loaded.

FYI : Lazy Loading Module

Answered By – Sangwin Gawande

Answer Checked By – David Marino (AngularFixing Volunteer)