Node Package Manager(NPM)
With NPM, you can install libraries, packages, and applications, along with their dependencies. You’ll need NPM to install all the libraries for Angular. You can install NPM by installing Node from nodejs.org. The NPM package manager comes bundled with it.
The Agular CLI is a command-line interface that you can use to create a new project, generate code, execute your application, deploy to production and much more. To install Angular CLI, follow the below steps:
- Open the command line in your respective operating system:
–Command Prompt on Windows and Linux
–Terminal on Mac OS
- Execute the following command:
npm install -g @angular/cli
Steps to create Angular Project in Visual Studio Code
Creating New Project
- Inside the Command Line, type and execute the following command:
ng new angular-example
- When prompted with the question – “Would you like to add Angular routing?” Type Y and hit Enter.
- When prompted with the question – “Which StyleSheet format would you like to use?” Select LESS by down-arrow keys and hit Enter.
The above command will create a folder or project named “angular-example” on the Desktop.
Opening The Project
Now that we’ve created the project let us open it in the VS Code. Follow the steps below:
- From the sidebar, select the Explorer tab or press Ctrl + Shift + E. Click on the Open Folder button.
- Select the folder which we just created. Here, I will choose “angular example.” Then, click on Select Folder.
- Here’s the project the CLI created for us. You’ll notice that it has created a number of files, including the app folder. This is where you’ll do most of your coding on the Angular project.
Running The Project
Do the following to run the project:
- From the top-level View menu, choose the Terminal option.
- Inside the terminal, type and run the following code:
- The CLI then builds the application, starts a web server, and opens the URL in the default browser, as shown in the image below:
Follow the steps below to debug the Angular project:
- From the sidebar, click on the Run and Debug tab and select the create a launch.json file option.
- When prompted to choose the environment, select the Chrome option.
- Change the local host from 8080 to 4200 and save the file by pressing Ctrl + S.
- Open any file from your project and add a breakpoint by left-clicking in the Editor Margin or pressing F9 on the current line. Breakpoints have red-filled circles.
- Inside the “Run and Debug” panel, click on the play button.
- The debugging session will start. VS Code will switch views to open a new browser window. You’ll notice the debugger hitting your breakpoint.