Creating Angular Project using Visual Studio Code

Back to: Angular Tutorials For Beginners and Professionals

Creating Angular Project using Visual Studio Code

In this article, I will discuss Creating an Angular Project using Visual Studio Code step by step using Angular CLI. Please read our Angular Environment Setup article before proceeding to this article.

Creating Angular Project using Visual Studio Code

Creating an Angular project using Visual Studio Code (VS Code) is straightforward. Angular is a popular web development framework, and VS Code is a widely used code editor that works well with Angular projects. Before you start, make sure you have the following installed:

• Node.js – Angular requires Node.js to be installed. You can download it from nodejs.org.
• npm (Node Package Manager) – It comes bundled with Node.js.
• Angular CLI – You can install Angular CLI globally on your machine using npm with the command: npm install -g @angular/cli

First, create a folder with the name AngularProjects anywhere within your machine. Now, we want to create an angular project with the name MyAngularApp. So, first, launch Visual Studio Code, then select the File => Open Folder option from the context menu, as shown in the image below.

Once you click on the File => Open Folder option, the following select folder window will appear. Here, you need to select the folder “AngularProjects” and click the Select Folder button, as shown in the image below.

To create an angular project using Visual Studio Code, click on the view and then select the Terminal option from the context menu, as shown in the image below.

Once you click on the Terminal option, the Visual Studio Code console will open, as shown in the below image.

Now type the command ng new MyAngularApp in the console and press enter to create the angular project, as shown in the image below. The ng new command will create a new angular project.

If you are getting the following error, it’s because of the Windows PowerShell execution policy.

To solve the above error, open Windows PowerShell in Administrator mode, type Set-ExecutionPolicy RemoteSigned, and press enter as shown in the image below.

Once you press the enter button, it will ask you the following question. Type A and press the enter key as shown in the below image.

When you are done, you can set the policy back to its default value using the Set-ExecutionPolicy Restricted command.

With the above changes, type ng new MyAngularApp in the console and press enter. Once you press the enter button, it will ask you some questions. The first question is whether you want to add the routing module or not to your project, as shown below.

If you want to include, add y else N and press enter. The second question it will ask you is which stylesheet format (CSS, SCSS, SASS, Less, Stylus) you would like to use in your angular project. Here, you need to select the stylesheet format using the up and down arrow. If you want to include CSS, you need to select the CSS option and press enter, as shown in the image below.

Once you press the enter button, it will take some time to create the project. It will install the necessary packages which are required for the angular project. While installing the packages, sometimes you will get some errors. If you got some error, then clean the npm cache and reinstall the Angular CLI latest version by using the following command.

npm cache clean –force
npm install -g @angular/cli@latest

Once the project is created successfully, you will get the Packages installed successfully message in the console, as shown below.

Change the directory to your project folder:

Let us now switch the directory to the created project folder, i.e., MyAngularApp. To change the directory, type the command cd MyAngularApp and press enter, as shown in the image below.

Compiling Angular Project:

You need to use the ng serve command to compile the angular project using Angular CLI. So, type ng serve and press enter as shown in the below image. The ng serve command will do two things. First, it will build the angular application and then start the web server.

Once the compilation is completed successfully, you will get the following output.

As you can see in the above image, the webserver is running at port number 4200. So, enter the URL http://localhost:4200/ in the browser, and you should get the following default page.

You can also use the ng serve -o command to compile the project, start the web server, and open the application using your default browser. So, type ng serve -o and press enter.

In the next article, I will discuss Modules in Angular Applications in detail. Here, In this article, I try to explain Creating an Angular Project using Visual Studio Code and Angular CLI in detail. I hope you enjoy this article.