Post
Ask Question

Setting Up Angular 2 In Visual Studio 2015

Setting Up Angular 2 in Visual Studio 2015
 
Following are the requirements for setting up Angular 2 environment in Visual Studio 2015.
  1. You should have Visual Studio 2015 installed with Update 3
  2. Node version 4.6.x or greater, npm 3.x.x or greater
  3. TypeScript 2.2.0 or later
First, download and install Visual Studio 2015 with update 3 using this link shown below.

https://visualstudio.microsoft.com/vs/older-downloads/

 
  • Then, open Visual Studio 2015. 
  • From the File menu, select File >> New >> Project. 
  • From Templates, select Visual C# >> Web >> ASP.NET Web Application as shown below.
  • Now, give your application a name and create a new empty Web Application Project.
 
To check whether Visual Studio is installed with update 3 or not, click on the Help menu and select "About Microsoft Visual Studio", as shown in the image.
 
 
The following window will open. Here, you can see whether Visual Studio 2015 is installed with update 3 or not.
 
Setting Up Angular 2 in Visual Studio 2015 
 
The next step is to download and install Node JS. Click on the following link and download Node JS
https://nodejs.org/en/download/
 
After opening this link, there will be two versions of Node JS available to download - one is for 32-bit OS and the other one is for 64-bit OS.
 
 
  • Select the version according to the type of OS you are using. To check this, open the Run window, type msinfo32 and click OK.
  • The following window. From here, select System Summary and then, see System Type option. If it says X86-based PC, then it is 32-bit OS. So, download the version of Node.js for 32 bit OS. If it says X64-based PC, then it is a 64-bit OS. So, download node.js for 64 bit OS.
  • As you can see, in my case, it is X86-based PC so it is 32-bit OS. Download the MSI file.
Setting Up Angular 2 in Visual Studio 2015 
 
Next, configure the environment settings for node and npm. For this, open Visual Studio 2015, click on Tools, and select Options, as shown in the image.
 
 
Then, select Project and Solutions tab and select External Web Tools. We need to move the global path entry above the two internal paths. For this, select the global Path and click the Up arrow, as shown in the image. This will tell Visual Studio to look for external tools like npm to look into the global path before the internal path.
 
Setting Up Angular 2 in Visual Studio 2015 
 
The next step is to download and install TypeScript file for Visual Studio 2015. You can download TypeScript files using this link.

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

 
 
Next, download a quickstart file. For this, click on the following link -  https://github.com/angular/quickstart
 
Open this link, select Clone or download, and download the quick start zip file.
 
Setting Up Angular 2 in Visual Studio 2015 
 
After downloading, extract the contents of the quickstart zip folder. Then, open the quickstart-master folder and select src folder, bs-config.json file, tslint.json file, package.json file, and copy all these files and paste in your Visual Studio 2015 project which you have created.
 
Setting Up Angular 2 in Visual Studio 2015 
 
 
 
Now, on Solution Explorer, click on the "Show All Files" option >> expand your project tab and you will see these files, but they are not included in the project. For this, select src folder >> select app folder. Inside this folder, select bs-config.json file, package.json, and tslint.json file and right-click. In the pop-up menu, click on "Include in project" option, as shown in the image.
 
Setting Up Angular 2 in Visual Studio 2015 
 
Click "No" when a prompt appears displaying search for TypeScript typings while including this file in projects.
 
 
 
 
Now, right-click on package.json and select the option to restore packages as shown in the image; this will automatically install packages for us.
 
Setting Up Angular 2 in Visual Studio 2015 
 
Once restoration is complete, click on Show All Files option. Again you will see a node_modules folder added to your project as shown in below image, which will contain the required modules but do not include this folder in the project. So, now all our installation is complete.
 
 
 
Next step is to run the project, for this, we need to do some changes. Here are the changes to be made:
  • Open index.html file present inside src folder and change base href which is pointing to forward slash to point to src folder as shown.
    1. <basehref="/"> change this to <basehref="/src/">  
    Because of this change, Visual Studio will be able to find systemjs.config.js and style.css present inside the src folder, this file's reference is added on the index.html page.

  • On index.html change the script reference to include a forward slash before node_modules as shown
    1. <scriptsrc="/node_modules/core-js/client/shim.min.js"></script>  
    2. <scriptsrc="/node_modules/zone.js/dist/zone.js"></script>  
    3. <scriptsrc="/node_modules/systemjs/dist/system.src.js"></script>  
  • Now open systemjs.config.js file present inside src folder and change this line of code 'npm:': 'node_modules/' to 'npm:': '/node_modules/' just include a forward slash before node_modules.

    You might not be able to open systemjs.config.js file, for this close Visual Studio and delete the componentmodel cache folder, it is present at the location where you have installed Visual Studio. Inside this there will be a Visual Studio 14.0 folder, and inside this there will be componentmodel cache folder delete this folder and open Visual Studio and then open systemjs.config.js file and make the required changes.

  • Now, build the project, you might get these errors as shown in the image, to resolve these errors we require some work around.

    Setting Up Angular 2 in Visual Studio 2015
Double click on the error or else inside node_modules folder there is the rxjs folder. Inside this there is Subject.d TypeScript file; open this file and change the following code inside Subject class from

lift<R>(operator: Operator<T, R>): Observable<T>

to

lift<R>(operator: Operator<T, R>): Observable<R>

Save the changes and again build the project.
 
Now, run the project by setting index.html as your startup file, you will see the following message displayed as shown in the image as output.
 
Setting Up Angular 2 in Visual Studio 2015 
 
index.html is a startup file, this file is present inside the src folder. Expand src folder, inside this there is app folder, and inside app folder, there is app.component.ts typescript file. The code that displays the message on index.html is present inside this TypeScript file. Following is the code inside this TypeScript file.

  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. @Component({  
  5.     selector: 'my-app',  
  6.     template: `<h1>Hello {{name}}</h1>`,  
  7. })  
  8. exportclass AppComponent {  
  9.     name = 'Angular';  
  10. } 

Now everything in Angular is a Component. A Component in Angular is a class with a  template and decorator. It is composed of the following three things:

  1. Template
  2. Class
  3. Decorator
The template defines the user interface, the HTML to be displayed on the view.
 
The class contains the code required for the template, it contains properties and methods.
 
Decorator adds metadata to the class making it an Angular component. This Decorator is provided by Angular, when we decorate an Angular class with Component Decorator it becomes an Angular Component.
 
Now in the above code, there is a Class with name AppComponent, this class is decorated with Component decorator provided by Angular.
 
To declare a class in Angular use class keyword. The name of the class is AppComponent. Export keyword is used along with the class keyword. Export keyword allows a class to be exported so that other components in the application can import and use this component if required.

To implement Component decorator we need to import it. This Component decorator is present inside Angular, so we need to import it from Angular as you can see in this line in the above code:

  1. import { Component } from "@angular/core";  
We have used import keyword, in the curly braces we specify what we want to import, then there is from keyword which specifies from where we want to import this Component.
 
Right click on Component decorator inside curly braces and select Go To Definition.
 
 
After this, select the second option.
 
As seen in the above, the code export keyword is used with this Component decorator, that is the reason we are able to import Component in our own Component; i.e. app.component.

We need to apply this Component decorator to our AppComponent class to add a metadata to it. Following is the code for it

  1. @Component({  
  2.    selector: 'my-app',  
  3.    template: `<h1>Hello {{name}}</h1>`,  
  4. })  
To apply a Component decorator to class use @ symbol and followed by it is the name of the decorator, which is Component. Following the name of Decorator, there are open and closed parentheses, and to this, we pass an object. This object contains various properties which specify the metadata that we want to add to the class.
 
First is selector property, the value assigned to it is my-app, selector becomes directive on any HTML page where we want to view the template.
 
Second is template property, it contains the HTML to be displayed on the view, the template is always enclosed within the pair of single backtick characters.
 
On index.html there is the following line of code:

  1. <my-app>Loading AppComponent content here ...</my-app> 

At runtime, this code is replaced by view template. Also, the selector my-app has become directive on the index.html page.

Now, you can see inside @Component there is a binding expression which includes name property. The name property has been assigned Angular valueinside AppComponent Class. Binding expressions are always included inside double curly braces.

Now, let us make some changes to the app.component.ts file. Change the name property value from Angular to Welcome to India as shown.

  1. export class AppComponent { name = 'Welcome To India'; }  

Now if you save the changes and refresh the web page you will not see the change value displayed because this is TypeScript code and the browser does not understand the TypeScript code, it needs to be compiled to JavaScript code before the browser can execute and display the updated value.

When we make some changes to the app.component file and save them the changes are not automatically compiled to JavaScript, so we need to build the solution. During the build process the TypeScript compiler is going to compile the TypeScript to JavaScript.

Instead of building the application every time we make changes and saving them we want typescript to automatically compile to JavaScript as soon as we save the changes. For this open tsconfig.json file inside the src folder and add one option, that is compileOnSave, and set this to true as shown.

  1. {  
  2.     "compileOnSave": true,  
  3.     "compilerOptions": {  
  4.         "target": "es5",  
  5.         "module": "commonjs",  
  6.         "moduleResolution": "node",  
  7.         "sourceMap": true,  
  8.         "emitDecoratorMetadata": true,  
  9.         "experimentalDecorators": true,  
  10.         "lib": ["es2015", "dom"],  
  11.         "noImplicitAny": true,  
  12.         "suppressImplicitAnyIndexErrors": true  
  13.     }  
  14. } 

Save the changes and refresh the web page, you will see the required change as shown in the image.

Setting Up Angular 2 in Visual Studio 2015
Next Recommended Reading Angular 2 - Resolving "No base href set" Error