Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Getting Started with Angular CLI | Angular Fundamentals
Introduction to Angular

bookGetting Started with Angular CLI

Now that all the necessary tools including Node.js, VS Code, and Angular CLI are installed, it's time to create your first project and see how Angular CLI simplifies the development process.

What is Angular CLI?

It allows you to:

  • Quickly create new projects with a predefined structure;

  • Generate components, services, and other project elements;

  • Start a development server for testing and debugging;

  • Build the application for production deployment.

With Angular CLI, you don't need to manually configure files and dependenciesβ€”everything is set up automatically.

Setting Up Your Workspace

Before creating a new project, choose a convenient location on your computer where you want to store your Angular projects.

If you don't have a dedicated folder for projects, create one using the following command:

This command creates a new folder named projects in the specified location.

Next, navigate to the newly created folder by running:

This command opens the projects folder, allowing you to work inside it.

Creating an Angular Project with CLI

To create a new Angular project, run the following command inside your project folder:

  • ng new - the command for creating a new Angular project;

  • angular-app - the project name (you can use any name you prefer).

After running the command, Angular CLI will prompt you with a few setup questions:

  • Would you like to add Angular routing? - you'll cover this later, so for now, select Yes;

  • Which stylesheet format would you like to use? - this determines the type of stylesheets for your project. I recommend choosing CSS, but you can select the option that suits you best.

Once you confirm these options, Angular CLI will begin installing dependencies. This process may take a few minutes as it downloads and installs all the necessary packages.

When the setup is complete, a success message will appear, indicating that the project has been created successfully.

Now, you can open the project in VS Code, which we installed earlier.

In the next chapter, you'll take a detailed look at the folder and file structure generated by Angular CLI to understand how an Angular project is organized and where the key parts of your application are located.

question mark

What is the purpose of the Angular CLI?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 1. ChapterΒ 5

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Awesome!

Completion rate improved to 3.13

bookGetting Started with Angular CLI

Swipe to show menu

Now that all the necessary tools including Node.js, VS Code, and Angular CLI are installed, it's time to create your first project and see how Angular CLI simplifies the development process.

What is Angular CLI?

It allows you to:

  • Quickly create new projects with a predefined structure;

  • Generate components, services, and other project elements;

  • Start a development server for testing and debugging;

  • Build the application for production deployment.

With Angular CLI, you don't need to manually configure files and dependenciesβ€”everything is set up automatically.

Setting Up Your Workspace

Before creating a new project, choose a convenient location on your computer where you want to store your Angular projects.

If you don't have a dedicated folder for projects, create one using the following command:

This command creates a new folder named projects in the specified location.

Next, navigate to the newly created folder by running:

This command opens the projects folder, allowing you to work inside it.

Creating an Angular Project with CLI

To create a new Angular project, run the following command inside your project folder:

  • ng new - the command for creating a new Angular project;

  • angular-app - the project name (you can use any name you prefer).

After running the command, Angular CLI will prompt you with a few setup questions:

  • Would you like to add Angular routing? - you'll cover this later, so for now, select Yes;

  • Which stylesheet format would you like to use? - this determines the type of stylesheets for your project. I recommend choosing CSS, but you can select the option that suits you best.

Once you confirm these options, Angular CLI will begin installing dependencies. This process may take a few minutes as it downloads and installs all the necessary packages.

When the setup is complete, a success message will appear, indicating that the project has been created successfully.

Now, you can open the project in VS Code, which we installed earlier.

In the next chapter, you'll take a detailed look at the folder and file structure generated by Angular CLI to understand how an Angular project is organized and where the key parts of your application are located.

question mark

What is the purpose of the Angular CLI?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 1. ChapterΒ 5
some-alt