This post details the procedure to install an Angular application using Angular CLI, with the commands and their explanation.
Installations
- Install Node and NPM: https://nodejs.org/en/download/
- Its better to install Node Version Manager to manage multiple node versions on the same machine: https://github.com/nvm-sh/nvm
Install angular CLI:
npm install -g @angular/cli
Project setup
Create new project by running the following command and configure accordingly:
ng new angular-ignite
cd angular-ignite
If you have Visual Studio Code installed, run the following command to open this project in VS Code:
code .
Running the project
To run the app, from the root folder, run:
npm start
or
ng serve
Fire up your browser, navigate to http://localhost:4200 to see your app.
Tip: You can open package.json and see the ‘scripts’ section. This shows the Angular commands mapped to npm commands for brevity.
Debugging Angular in VS Code
Make sure that the app is still running using npm start, then click the bug sign on the left sidebar:
And click create a launch.json file.
And then choose Chrome from the list:
Change the url from "url": "http://localhost:8080", to "url": "http://localhost:4200" and save the file.
Open a file and add a breakpoint:
On the top left side, next to RUN AND DEBUG, click the play button:
This will initialise a debugging session and open a new browser window. It will hit your breakpoint, and you can evaluate a vast number of things such as variables, evaluations in th debug console, call stacks, loaded scripts etc.
Summary
This post showed you how to install prerequisites for an Angular app, how to create a new Angular project and how to run & debug an Angular app in Visual Studio Code.
Code Olives 