Ecommerce angular project

In this article, We will learn about Angular Cli 9 from creating an e-commerce website from scratch.

Angular free Udemy courses:

Download Udemy Courses free

First, ensure Node.js, npm, visual studio Code( my favorite code editor ) and Angular CLI installed on your computer. 

Next check whether your visual studio PowerShell( Terminal ) is recognizing or detecting the ng commands. If not, don’t worry check this link and follow the steps to install perfect.

  1. Create a new angular e-commerce project

Go to Visual Studio Code, Open the folder you want to create a project. My path is D:\helperscript_content\angular_project_helperscript> . Go to the path in PowerShell( Terminal ) in visual studio code, and type ng new ecommerceAngular as below.

D:\helperscript_content\angular_project_helperscript> ng  new ecommerceAngular    

Note: ecommerceAngular is a project name by default.

It will ask to create routing and which style technology to use our project. We also create routing in this e-commerce project and for styling I prepare CSS. so give yes as a command and enter.

? Would you like to add Angular routing? Yes

? Which stylesheet format would you like to use? CSS

Angular projects take several times to create and install the needed packages. So Please be patient.

After packages are installed, let’s check the angular project is compile and run properly by the command  in the terminal

Let’s start creating components.

Go to the project folder in Powershell (Terminal) and create a component by using this short command‘ ng g c header

ng => define angular

g => generate

C => component

header => name of the component

D:\helperscript_content\angular_project_helperscript\ecommerceAngular> ng   g c header 

Note: Naming conversion of an angular project for the component.

If we give the name of the component in camelCase it should split the component name by hyphen(-).


ng g c firstHeader , Now the component name will change to first-header

Now check the folder ecommerce_angualr/app/src into the project folder. The header component was created with four files called header.component.html, header.component.css, header.component.ts, and header.component.spec.ts

header.component.html  => our HTML code here.

header.component.css => our CSS code here.

header.component.ts  => typescript code here for header component.

header.component.spec.ts => this file for the testing purpose.(optional file)

Note: The spec files are unit tests for your source files. The convention for Angular applications is to have a .spec.ts file for each .ts file. They are run using the Jasmine javascript test framework through the Karma test runner ( when you use the ng test command.

Next, go to app.component.html in the app folder and remove all the default code then add the below code.


Ecommerce website Home page content


Then go to the project folder in terminal or PowerShell type ng serve

After it compiled successfully. Go to the browser type in the url http://localhost:4200

If port number 4200 used by another application, then run by defining port using –port


ng serve –port 3000