Angular Installation and Environment Setup

George
Apr 25, 2023

11k
0
4
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

This article was written around the middle of 2021, and it used to be named:

At that time, I was in a project to rewrite a legacy app to Web application with Angular as front end. The company had a very strict policy, even for developers, about installing any software if it is not in the Software Center installation list. Unfortunately, the node.js was not, that is a must for installing Angular through npm. Then we encountered a huge problem passing the security department check.

At this point, I had to do a lot of research and see if we had any way around the "censor", such as not installing node.js, or other alternative ways. I collected some info, and wrote a frame of the article, npm, with related info of yarn --- a similar management tool like npm, and which might be better. Then, we got the Angular installed, then I stopped writing the article.

I will rewrite and finish the article with a new topic "Angular Installation and Environment Setup", summarize all the info about Angular installation I collected during the last 4~5 years. I will keep the searched info as references at the bottom.

Introduction

Angular is a development platform, built on TypeScript. As a platform, Angular includes:

A component-based framework for building scalable web applications;
A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more;
A suite of developer tools to help you develop, build, test, and update your code.

This article will include:

Introduction
A - Node.js --- JavaScript Runtime
B - npm --- Node Pachage Management
C - TypeScript --- JavaScript with Optional Typing
D - Angular --- a development platform, built on TypeScript
E - Angular Installation
- Installation
- Uninstalltion and Installation of Specific Version
F - Angular Related
- Use npm to Run Angular;
- Angular CLI
- Version Tests

A - Node.js --- JavaScript Runtime

We need to install Node.js in order to install TypeScript.

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Node.js (wiki) is an open-source, cross-platform, JavaScript runtime environment (Framework) that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm, unifying web-application development around a single programming language, rather than different languages for server-side and client-side scripts.

Node.js Installation: Download | Node.js (nodejs.org):

Latest LTS Version: 16.15.1 (includes npm 8.11.0)

Note: Do not install the current latest feature, say, v 18.3.0 that will make some errors.

B - NPM --- Node Pachage Management

What is npm?

npm is the world's largest Software Library (Registry): contains over 800,000 code packages.
npm is also a software Package Manager and Installer

The name npm (Node Package Manager) stems from when npm first was created as a package manager for Node.js.

Open-source developers use npm to share software.
npm is free to use.
npm is installed with Node.js

npm (wiki) (originally short for Node Package Manager) is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website. The package manager and the registry are managed by npm, Inc.

npm Documentation

Exg.:

Install TypeScript: npm install -g typescript

Install npm, npm install -g npm

Update npm to new version: npm install [email protected] -g

Install the Angular CLI, npm install -g @angular/cli

C - TypeScript --- JavaScript with Optional Typing

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript is JavaScript with optional typing. TypeScript is a compiled language, it's not interpreted at run-time. The TypeScript compiler takes TypeScript files (.ts) and compiles them in to JavaScript files (.js).

TypeScript is a programming language owned and maintained by Microsoft. It is an open-source as well as an object-oriented programming language. TypeScript is the superset of JavaScript since it contains all of JavaScript's elements along with components such as classes, modules, interfaces, and types. The main feature of TypeScript is its Static typing approach. The typeInstall the Angular CLI, npm install -g @angular/cliScript was first introduced in October 2012 by Microsoft.

TypeScript (wiki) is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.

Install TypeScript:

TypeScript can be installed through the NPM package manager.

npm install -g typescript
The -g means it’s installed on your system globally so that the TypeScript compiler can be used in any of your projects.

tsc -v // check typeScript version

D - Angular --- A Development Platform, Built on TypeScript

AngularJS (wiki) is a JavaScript-based open-source front-end web framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Angular (wiki)(commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

E - Angular Installation

1, Install Angular CLI: and Basic Angular Commands

Angular command in CLI:

To install the Angular CLI, npm install -g @angular/cli

To create a new workspace and initial starter app: ng new my-first-project

To run app: cd my-first-project, ng serve -o,

Help: ng help, ng help ng generate --help

Build: ng build my-app -c production,

Generate: ng generate component name , ng generate service name,

Version: ng version or ng v,

3, Upgrade Angular CLI to the latest version

You may use install command to update angular:

npm install -g @angular/cli@latest

You can also use update command to do the job:

ng update @angular/cli @angular/core

See: ng update and https://update.angular.io/. for details to update from a certain version to a specific version.

F - Angular Related

1, Use NPM to run Angular app:

Install all required npm packages by running npm install or npm i from the command line in the project root folder (where the package.json is located). --- this has been done by 1, Install Node.js and npm

Start the app by running npm start from the command line in the project root folder, this will compile the Angular app and automatically launch it in the browser on the URL http://localhost:4200.

In npm: npm start ~ angular: ng serve (the browser will not be launched), letting browser launched command is ng serve -o or ng serve -open

2, Angular CLI

Angular the local environment and workspace by Angular CLI tool. Angular Command Line Interface

Knowledge of TypeScript is helpful, but not required.

LTS release status is "long-term support", Download from nodejs.org. npm packages

To run your Angular locally, you need the following installed on your computer:

Node.js. Check version of Node.js runs on your system, run node -v , check the version of npm by npm -v

The Angular CLI. From the terminal, install the Angular CLI globally with:
npm install -g @angular/cli

With the Angular CLI, you can use the command ng to create new workspaces, new projects, serve your application during development, or produce builds to share or distribute.

3, Test:

Test Node. To see if Node is installed, open the Windows Command Prompt, Powershell or a similar command line tool, and type node -v. This should print a version number, so you’ll see something like this v0.10.35.
Test NPM. To see if NPM is installed, type npm -v in Terminal. This should print NPM’s version number so you’ll see something like this 1.4.28
Create a test file and run it. A simple way to test that node.js works is to create a JavaScript file: name it hello.js, and just add the code console.log('Node is installed!');. To run the code simply open your command line program, navigate to the folder where you save the file and type node hello.js. This will start Node and run the code in the hello.js file. You should see the output Node is installed!.