Setup Angular Environment On Visual Studio 2017

Many new JS frameworks are introduced every day. But only some of the frameworks get popular. In this list, AngularJS is the most popular one. The Angular Framework team is updating it to get more sophisticated and powerful.

The AngularJS 1.x is fully based on MVC approach and the team has made Angular 2 totally different from Angular 1.

You can refer to the following article to get more clarity,

In this article, we will see how to setup the Angular 2 environment with Visual Studio 2017 to develop the application.

To develop Angular 2 applications, we need the following components.

  1. NodeJS 4.6 or greater and NPM (Node Package Manager) 3.0 or greater; You can download it from the following URL and install.

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

  1. TypeScript; You can download it from the following URL.

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

To verify the Node and NPM version, execute the following commands on the Windows command prompt.

  • Node –v
  • NPM –v

I have the following versions of Node & NPM.

Visual studio 2017

Once you install and verify the version, follow the below steps to set up and run the application. Here, it's explained with form application. You can select the project according to your flexibility, such as MVC.

  1. Open Visual Studio and select File->New->Project. You will get the following window.

    Visual studio 2017

  2. Select Web template and .NET Web Application.

  3. Name your project and select location. Finally, click OK.

    Visual studio 2017

  4. Now, you get a new window to select the project template. Select Empty template and OK.

    Visual studio 2017

  5. You can see Visual Studio project like the following image after creating the project.

    Visual studio 2017

    Now, you need to add three components to set up Angular 2 on the project.
    • NPM Configuration File
    • TypeScript Configuration File
    • Config.js File
  1. To add NPM Configuration file, right-click the project and select Add ->New Item. Then, select the NPM Configuration file. Finally, click OK.

    Visual studio 2017

  2. Just copy and paste the following code into the NPM Configuration file. We will learn about this file in upcoming articles.
    1. {  
    2.   "name""angular2withvs2015",  
    3.   "version""1.0.0",  
    4.   "dependencies": {  
    5.     "@angular/common""~2.1.1",  
    6.     "@angular/compiler""~2.1.1",  
    7.     "@angular/core""~2.1.1",  
    8.     "@angular/forms""~2.1.1",  
    9.     "@angular/http""~2.1.1",  
    10.     "@angular/platform-browser""~2.1.1",  
    11.     "@angular/platform-browser-dynamic""~2.1.1",  
    12.     "@angular/router""~3.1.1",  
    13.     "@angular/upgrade""~2.1.1",  
    14.     "bootstrap""3.3.7",  
    15.     "core-js""^2.4.1",  
    16.     "reflect-metadata""^0.1.8",  
    17.     "rxjs""5.0.0-beta.12",  
    18.     "systemjs""0.19.39",  
    19.     "zone.js""^0.6.25"  
    20.   },  
    21.   "devDependencies": {  
    22.     "@types/core-js""^0.9.41",  
    23.     "@types/node""6.0.40",  
    24.     "gulp""3.9.1",  
    25.     "gulp-tsc""^1.2.5",  
    26.     "gulp-typescript""^3.1.2",  
    27.     "rimraf""^2.5.4",  
    28.     "typescript""^2.0.7"  
    29.   }  
    30. }  
  1. You can see the node module generation process on the status bar after saving the file.

    Visual studio 2017

  2. Once it is completed, you can see the node_modules folder on your project, after selecting the option Show all files in the Solution Explorer.

    Visual studio 2017

  3. To add TypeScript configuration file, right-click the project and select Add ->New Item and select the TypeScript Configuration File. Click OK and paste the following code into it.

    Visual studio 2017
    1. {  
    2.   "compilerOptions": {  
    3.     "target""es2015",  
    4.     "module""commonjs",  
    5.     "moduleResolution""node",  
    6.     "sourceMap"true,  
    7.     "emitDecoratorMetadata"true,  
    8.     "experimentalDecorators"true,  
    9.     "removeComments"false,  
    10.     "noImplicitAny"true,  
    11.     "types": []  
    12.   },  
    13.   "exclude": [  
    14.     "node_modules"  
    15.   ]  
    16. }  

  1. To add Config.js, add a JavaScript file with the name system.config.js into the project and paste the following content in it.
  1. (function (global) {  
  2.     var map = {  
  3.         'app''/app',  
  4.         '@angular''/node_modules/@angular',  
  5.         'angular2-in-memory-web-api''node_modules/angular2-in-memory-web-api',  
  6.         'rxjs''/node_modules/rxjs'  
  7.     },  
  8.         packages = {  
  9.             'app': { main: './main.js', defaultExtension: 'js' },  
  10.             'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },  
  11.             'rxjs': { defaultExtension: 'js' }  
  12.         },  
  13.         ngPackageNames = [  
  14.             'common',  
  15.             'compiler',  
  16.             'core',  
  17.             'http',  
  18.             'platform-browser',  
  19.             'platform-browser-dynamic',  
  20.             'router',  
  21.             'forms'  
  22.         ];  
  23.   
  24.     function packUmd(pkgName) { packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' } }  
  25.   
  26.     ngPackageNames.forEach(packUmd);  
  27.   
  28.   
  29.     var config = {  
  30.         map: map,  
  31.         packages: packages  
  32.     };  
  33.   
  34.     System.config(config);  
  35.   
  36. })(this);  

Now, our project is ready to develop Angular 2. Now, we need to add three more TypeScript files in the app folder.

    • module.ts
    • ts
    • component.ts

      Visual studio 2017

  1. Add the TypeScript file with the above-mentioned name and paste the following content into the relevant file.

app.module.ts

  1. import { NgModule } from '@angular/core';  
  2. import { BrowserModule } from '@angular/platform-browser';  
  3. import { AppComponent } from './app.component';  
  4.   
  5. @NgModule({  
  6.     imports: [BrowserModule],  
  7.     declarations: [AppComponent],  
  8.     bootstrap: [AppComponent]  
  9. })  
  10. export class AppModule { }  

main.ts

  1. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  
  2. import { AppModule } from './app.module';  
  3.   
  4. platformBrowserDynamic().bootstrapModule(AppModule);  

app.component.ts

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

  1. Then,add a webform into the project and replace the following script.
    1. <script src="/node_modules/core-js/client/shim.js"></script>  
    2. <script src="/node_modules/zone.js/dist/zone.js"></script>  
    3. <script src="/node_modules/systemjs/dist/system.src.js"></script>  
    4. <script src="/system.config.js"></script>  
    5. <script>  
    6.    System.import('app').then(null, console.error.bind(console));  
    7. </script>  
  1. Add the following code under the form tag on the same Web Form file.
    1. <my-app>Loading Angular2...</my-app>  
  1. Finally, build and run the application. You can see the following result in the browser.

    Visual studio 2017

In this article, I only explained how to set up the environment and run the sample application. We will later see the usage of files which I used in this project.

Next Recommended Readings