Installing Angular

  • There are many ways we can create Angular project but the best and recommended way to create an Angular app is by using Angular CLI.
  • Angular build is a bit more detailed that other languages, there a couple of files that needs to be converted before we run it on the browser.
  • And Angular CLI does all of the above so that we ship a highly optimized code version to the browser.
  • To install Angular CLI we need node JS, node JS is a server side language.Node Js will be used by the Angular CLI to bundle and optimize our project
  • NPM(Node Package Manager) of node js will be used to manage different dependencies of Angular Project has. Dependencies as in Angular framwork itself as well as some other libraries that framework uses.

Steps to install node js on ubuntu

cd ~
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs

Steps to Update npm in Linux

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Steps to Update npm in Windows

npm install -g

Steps to Install Angular CLI and make a project

sudo npm install -g @angular/cli

Steps to create new project using Angular CLI

sudo ng new my-app
//or
sudo ng new my-app --use-cdn //To use CDN

Steps to run the project on server

cd new my-app
sudo ng serve

Hit the below URL to see if the server is up and running and you are able to see the page.

http://localhost:4200/

Download the VS Code editor and install it so that we can edit our angular code in VS Code

Download the VSCode keybinds which personally prefere keybindings.json_Download

Add the below plugins for VS Code via File > Preference > Extensions to make your life easier.

  • Auto Imports – Automatic imports in TS file
  • angular2-switcher – To switch faster between HTML,TS and CSS file
  • json2TS – Converts Json object to typescript interface
  • Angular Essentials
    • Angular Language service – Autocomplete in HTML file
    • Angular v6 Snippet – Automatic creation of for loop and other angular snippets(Mikael Morlund)
    • Prettier – Code formatter – Autoformat code
  • Material Theme
  • Emmit – For easier lost of nested tags creation in single line
  • Live Server – For Live changes in HTML file without refresh
  • CSS Peak – To navigate to the css file directly
  • Bracket Pair Colorizer – Highlight the brackets selected
  • ES7/React Snippets – React specific imports shortcut
  • Eclipse Keymap – For eclipse keyboard shortcuts
  • TSLint – Just like sonar lint for java eclipse

Leave a Comment