Learning Angular v2

Introduction

This is not the first article on Angular v2 available on the web to learn, implement, and use Angular v2 in development of web applications. After thinking a lot about whether should I write this article or not, I realized I should go ahead and write something for beginners.

Basically, you just need to know a bit of JavaScript to learn Angular 2.

Why Angular 2

The most basic question that pops into my mind whenever I see anything new in technology is “Why?". I feel that the question is genuine as a lot of frameworks/languages are already there. So, why do we need another one?

Angular2 is not an upgraded version of Angular JS 1X, it is completely rewritten and gives more flexibility to develop modern browser web applications.

Below are a few reasons to choose Angular 2 for web development.

Faster browsing experience with modern browsers
Better performance
Enhanced Dependency Injection
Good mobile development support
Improved Routing

Above are the certain reasons for choosing Angular 2 as a development platform. I will explain each feature in more details later in the labs by giving example.

Prerequisites for Angular 2 web applications

The basic software required to set up and run an Angular application for web development consist of -

NodeJS and NPM
Any editor like Visual Studio or Web storm
TypeScript

Setting up Angular2 project with Visual Studio

Step #1 Installing NodeJS and npm (node package manager)

Go to the link below.

https://nodejs.org/en/download/

Download node from the link as per your machine configuration and install. npm will also be installed as part of Node. Check the version installed on machine using commands node -v and npm -v on command prompt.

Step #2 Install Visual Studio 2015 update 3 or above

For this demo, I am using VS 2017 Enterprise Edition.

Step #3 Install TypeScript for Visual Studio

Go to link below and download TypeScript for VS 2017 and install the same.

https://www.microsoft.com/en-us/download/details.aspx?id=55258

TypeScript

TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces, and statically typed like C# or Java.

You can learn more using the below link.

https://www.tutorialspoint.com/typescript/

Step #4 Create a new web project

Open an empty web project and name it anything you want.

Angular

Step #5 Copying the Angular start-up files

Go to link https://github.com/angular/quickstart. Download the zip file from the web to your local machine. Unzip it and you will find some files as below.

Angular

We need to copy these start up files to the root directory of the Angular web project and include the same in our project.

Src folder
bs-config
package
tslint

Step #6 Restore the required packages

Right-click on the package.json file copied as start-up files and do a restore package from there.

Angular

It will take some time restoring the package mentioned in the package.json file to project. It's worth waiting for some time.

Once all the required packages are restored, navigate to the project folder using the command prompt.

In my case, the folder is below.

Angular

And, run a command: npm start

It will take some time and launch a lite server and host the application with URL local and external.

Local: http://localhost:3000/

Angular

Angular
So, this has successfully launched the application on port 3000 and URL: http://localhost:3000/

Code which has displayed the Hello Angular on web from is from app.componenet.ts.

import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent { name = 'Angular'; }

If we run the application using Visual Studio Editor by selecting the index.html as start page.

Angular

We will get the output something like this.

So, the application which is working using Command prompt and Lite Server is now giving some error when we see it through our browser's Developer Tool by pressing F12.

Running application using Visual Studio

If you see the error after running the application, most of the errors are - "404 Not Found".

Index.html

<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>

Shown above is the code for index.html which we have copied from Angular start-up files. Mentioned below are the changes required to run the application using Visual Studio.

Change #1

<base href="/">

Base is pointing to the root directory but ideally, it should have pointed to src folder. Change the base to point /src/ folder.

Change #2

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

This script should point /node_modules/.

Change #3

In system.js file, npm should point to /node_modules/.

paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
Change 'node_modules/' to '/node_modules/'

Angular

Save these changes and run the application from Visual Studio. You can see the website running on the same port but this time, on IIS Express of your local machine rather than the Lite Server

Conclusion

While learning Angular 2, you may have a lot of questions related to TypeScript, different JS files like shim.js, Zone.js, system.js, and other application-related configurations. So, in the upcoming article, I will explain each and everything in a very detailed manner.

Keep learning and keep smiling.

Resources and Useful Links

https://angular.io/docs
https://github.com/angular/quickstart

8 Comments

Join the conversation! Your thoughts help the community grow.

William Powers8y ago
Following the instructions didn't work for running it in VS. Running it in NPM works; but running it in VS 017 gets these errors: Severity Code Description Project File Line Suppression StateError TS2307 (TS) Cannot find module 'protractor'. e2e (tsconfig project) C:\Users\MrBabakS\source\repos\AngularQuickStart\e2e\app.e2e-spec.ts 1 Active Error TS2415 (TS) Class 'Subject<T>' incorrectly extends base class 'Observable<T>'. Types of property 'lift' are incompatible. Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'. Type 'Observable<T>' is not assignable to type 'Observable<R>'. Type 'T' is not assignable to type 'R'. src (tsconfig project) C:\Users\MrBabakS\source\repos\AngularQuickStart\node_modules\rxjs\Subject.d.ts 16 Active
- Abhishek Kumar8y ago
  Let me work through with the error message William..
abhinay S8y ago
Well explained Abhishek
- Abhishek Kumar8y ago
  Thanks a lot for feedback
Nilesh Patil9y ago
Nice One Sir...........
- Abhishek Kumar9y ago
  Thanks a lot for feedback
Amit Kumar Singh9y ago
Thanks for sharing.......
- Abhishek Kumar9y ago
  Thanks Amit for feedback..