Create Angular 12 application in 5 easy steps

picture from https://www.angularminds.com/

1. Set up your environment.
2. Create a new workspace and an initial application.
3. Serve the application.
4. Making Angular components & Make changes to the application.
5. Final code review.

LET’S DO IT TOGETHER

Set up your environment.

https://angular.io/guide/setup-local

Install the Angular CLI using the below command

npm install -g @angular/cli

Create a new workspace and an initial application.

Go to your folder where you want to store your project files.

To create a new workspace and initial starter app:

Run the CLI command ng new and provide the name my-app, as shown here:

ng new your-app-name

The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

HOW DOES CLI CREATES AND SET UP OUR SOLUTION DIRECTORY FOR ANGULAR?

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

The CLI creates a new workspace and a simple Welcome app, ready to run.

Serve the application

The Angular CLI includes a server and environment, for you to build and serve your app locally so we can easily start development by doing basic setup as below

1. Navigate to the workspace folder, such as your-app-name.
2. Run the below command to start your angular app:

First you have to move to your working directory

cd your-app-name

start your application by executing this command

ng serve --open

we can also change default port by adding this prop in command as example

ng serve --open --port 3001

Making Angular components & Make changes to the application

we can create a new component using the below command on the cmd

ng g component component-name

OR

ng g c component-name

We can also create components inside a specific folder using the below command

ng g component specific-folder-name/component-name

OR

ng g c specific-folder-name/component-name

for example, we are creating a dashboard component

ng g c dashboard

In this example, we have created a component in the default repository

Add content in dashboard.component.html

<h2>HELLO, I’M DASHBOARD</h2>

Open app-routing.module.ts file replace code

const routes: Routes = [];

with

const routes: Routes = [{ path: ‘’, component: DashboardComponent }];

Also, remove all code from the app.component.html file and add the below code to it

<router-outlet></router-outlet>

Rum application using below code ng serve --open --port 3001

Yoohoo click here your application is running effortlessly now

CODE: Github reference code