Create and Serve the Angular Project

In this lesson, we’ll create the frontend part of our course management application as previously discussed.

Step 1: Navigate to our working directory

To begin creating our Angular project, we need to move to the working directory to generate a new project.

We’ll be using the educative folder for this course. To do that, we use the command below:

cd educative

Step 2: Generate a new Angular project

Once inside the educative folder, we can create a new project using the Angular CLI. To do that, we run the command below:

ng new Course-Management-App-Frontend

This will create a new directory inside the educative folder called Course-Management-App-Frontend. The Angular CLI will also ask us a couple of prompt questions, which can be found in the image below:

• The first question asks us if we want to add routing to our application. The choice to make here would be “Yes” because we’ll navigate different routes in our application. This will also make the Angular CLI set up a routing module to set up all our routes.

• The second question is about the styling format we want to use. For this course, we’ll use CSS. We can select that by pressing the “Enter” key.

Step 3: Navigate to the project directory

Once the two prompt questions have been answered, the Angular CLI will create a new project. Next, all we need to do is cd into the newly created project by running the command below:

cd Course-Management-App-Frontend

Step 4: Serve the Angular application

Once our application is created successfully, we can serve the application in the browser by running the following command in the terminal:

ng serve

Once the application compiles successfully, we’ll see the output.