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,

• AngularJS 2.0 From Beginning - Introduction of AngularJS 2.0

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/

2. 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.

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.
   
   
   
   
2. Select Web template and .NET Web Application.
   
   
3. Name your project and select location. Finally, click OK.
   
   
   
   
4. Now, you get a new window to select the project template. Select Empty template and OK.
   
   
   
   
5. You can see Visual Studio project like the following image after creating the project.
   
   
   
   Now, you need to add three components to set up Angular 2 on the project.

• NPM Configuration File
• TypeScript Configuration File
• Config.js File

6. To add NPM Configuration file, right-click the project and select Add ->New Item. Then, select the NPM Configuration file. Finally, click OK.
   
   
   
   
7. Just copy and paste the following code into the NPM Configuration file. We will learn about this file in upcoming articles.
   

   {
     "name": "angular2withvs2015",
     "version": "1.0.0",
     "dependencies": {
       "@angular/common": "~2.1.1",
       "@angular/compiler": "~2.1.1",
       "@angular/core": "~2.1.1",
       "@angular/forms": "~2.1.1",
       "@angular/http": "~2.1.1",
       "@angular/platform-browser": "~2.1.1",
       "@angular/platform-browser-dynamic": "~2.1.1",
       "@angular/router": "~3.1.1",
       "@angular/upgrade": "~2.1.1",
       "bootstrap": "3.3.7",
       "core-js": "^2.4.1",
       "reflect-metadata": "^0.1.8",
       "rxjs": "5.0.0-beta.12",
       "systemjs": "0.19.39",
       "zone.js": "^0.6.25"
     },
     "devDependencies": {
       "@types/core-js": "^0.9.41",
       "@types/node": "6.0.40",
       "gulp": "3.9.1",
       "gulp-tsc": "^1.2.5",
       "gulp-typescript": "^3.1.2",
       "rimraf": "^2.5.4",
       "typescript": "^2.0.7"
     }
   }

8. You can see the node module generation process on the status bar after saving the file.
   
   
   
   
9. 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.
   
   
   
   
10. 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.
    
    
    

    {
      "compilerOptions": {
        "target": "es2015",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "types": []
      },
      "exclude": [
        "node_modules"
      ]
    }

11. To add Config.js, add a JavaScript file with the name system.config.js into the project and paste the following content in it.

(function (global) {
    var map = {
        'app': '/app',
        '@angular': '/node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': '/node_modules/rxjs'
    },
        packages = {
            'app': { main: './main.js', defaultExtension: 'js' },
            'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },
            'rxjs': { defaultExtension: 'js' }
        },
        ngPackageNames = [
            'common',
            'compiler',
            'core',
            'http',
            'platform-browser',
            'platform-browser-dynamic',
            'router',
            'forms'
        ];

    function packUmd(pkgName) { packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' } }

    ngPackageNames.forEach(packUmd);


    var config = {
        map: map,
        packages: packages
    };

    System.config(config);

})(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
  
  
  

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'First Angular 2 Application'; }

13. Then,add a webform into the project and replace the following script.
    

    <script src="/node_modules/core-js/client/shim.js"></script>
    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/system.config.js"></script>
    <script>
       System.import('app').then(null, console.error.bind(console));
    </script>

14. Add the following code under the form tag on the same Web Form file.
    

    <my-app>Loading Angular2...</my-app>

15. Finally, build and run the application. You can see the following result in the browser.
    
    
    

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.