- 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.
Download the VS Code editor and install it so that we can edit our angular code in VS Code
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