Angular Tutorials- Development Environment Setup

Angular Tutorials- Development Environment Setup

<strong>Originally published by </strong><a href="https://codeburst.io/@neerajdana" target="_blank">Neeraj Dana</a> <em>at&nbsp;</em><a href="https://codeburst.io/angular-tutorials-development-environment-setup-ab209af8d22e" target="_blank">codeburst.io</a>

Originally published by Neeraj Dana at codeburst.io

What to expect

In this Angular Tutorials, ill tell you how you can quickly set up your development environment how to install angular cli and generate a new angular project with angular cli commands

First thing First

The base will be installing node js as all the dependencies of angular core angular cli and their sub-dependencies will be installed as the node packages and will be connected with npm

Installing Node js

Head over to nodejs.org official website of node js and based on your platform we need to install the node installer with Stable node js version. when you visit nodejs.org, you will see a page like this


So you will have two options to install node js. Make sure you install the LTS node js version the current node js version will have test features, but the latest breaking changes and you don’t want to mess with it 

so based on your platform download the installer and install node js on your pc

now to verify whether node js is installed or not we will check the version of the node which will give us the node js version on our pc

node -v

Similarly, we will review the version of the node package manager also

npm -v

Installing Angular cli

First, let answer what is angular cli


Angular CLI is a command line interface, thus ‘CLI’, which includes the functionality that WebPack provides. It uses Webpack to include all the packaging, importing, BrowserLink, etc., but you do not need to know how Webpack works or how it needs to be configured to run in different environments or on different types of machines. All the Webpack configuration is done completely by CLI and leaves it out of the hands of a developer unless they choose to adjust the settings themselves. In addition, CLI assists developers by generating code which follows the best practices as defined by https://Angular.io, Angular’s home site.

Angular cli version

The angular cli latest version as of now is 7.3.8 to install this version we will run the command below


npm i -g @angular/[email protected]

this command will execute and ill install angular cli latest version globally because we have used -g flag which stands for — globally so that we can access angular cli from anywhere in our system

The other version (not recommended) which is in beta is 8.0.0-RC if you know what you are doing then you can install this current unstable version by this npm command

npm i -g @angular/[email protected]

so to verify if the angular cli is installed correctly on your system or not we will check the angular cli version by running

ng --version

So that’s it you have your angular development environment you can go ahead and create your first angular project by running

ng new yourawesomeprojectname

this command will generate a brand new angular scaffolded project template for you where you can start your angular development and hit ng serve remember you have to be inside an angular-cli project in order to use the serve command. 

------------------------------------------------------------------------------------------------------------------

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Angular 7 (formerly Angular 2) - The Complete Guide

☞ Learn and Understand AngularJS

☞ Angular Crash Course for Busy Developers

☞ The Complete Angular Course: Beginner to Advanced

☞ Angular (Angular 2+) & NodeJS - The MEAN Stack Guide

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ Angular (Full App) with Angular Material, Angularfire & NgRx

angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica