Learn PWA (Progressive Web App) in Angular Application.

In this article, we discuss how to add PWA in our application.

Let’s create a new project for PWA in angular for that you need to run the following command to create a project.

ng new pwa-demo

“pwa-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd pwa-demo”. To Run angular applications, it required to run “ng serve”.

After that, we need to install the Angular material npm package in our application. run below command to install.

ng add @angular/material

When installing material it asks to theme default or custom theme. For use default, we need to select the default theme. Then it will ask to import browser animation in Angular material. after installing the theme we need to import CSS in style.css

material pink theme in src/styles.css file.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Let’s create “material.module.ts” file for material component to import. Below code added in that file.

import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule  } from '@angular/material/paginator';
import { MatToolbarModule  } from '@angular/material/toolbar';

@NgModule({
    imports: [
        MatTableModule,
        MatPaginatorModule,
        MatToolbarModule
    ],
    exports: [
        MatTableModule,
        MatPaginatorModule,
        MatToolbarModule
    ]
})

export class MaterialModule { }

#angular #pwa #web-development #programming #developer