Why You Should Always Restart Your Angular App After Ng Add

Photo by Lance Anderson on Unsplash

This post is a little bit special where I will share the step-by-step guide on how I did something wrong, spent an hour troubleshooting it, and how you can avoid it.

Problem Background

This problem happened when I created a new Angular application and running ng serve --open. You will see the default screen like below.

Installing Angular Material
I open the second terminal window to install angular/material into my project using ng add angular/material command. Refer to the screenshot below.

tekloon:form-transition-new teklooncheah$ ng add @angular/material
Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1316 bytes)
✔ Packages installed successfully.
UPDATE src/app/app.module.ts (502 bytes)
UPDATE angular.json (3996 bytes)
UPDATE src/index.html (520 bytes)
UPDATE…