Step up Angular 2 Environment in your visual studio Application.

Step up Angular 2 Environment in your visual studio solutions.

Due to the huge demand of the angular 2 in the IT industry .Due to hectic pressure and more results in shorter time is every company demands. Angular 2 in it self is little bit complex as compared to its previous version .

 Angular 2 Installing Requirements.

1         1.       Visual studio 2015 update 3. 

           2.       Install Node package manager(NPM).

           3.       Install TypeScript. 

           4.       Create new solution in Visual studio 2015 update 3. Open node package manager command prompt .And run "npm install" command.  

        5.       And after successful completion of the above command .This will create four files in your application.

·         Package.json

·         system.js.config.js

·         tsconfig.json

·         typings.json.

tsconfig.json  : tsconfig.json file is used by typescript compiler for typescript configuration  settings. It is recommended to create at the root of your application.

Add below line in your json file.

{

  "compilerOptions": {

    "target": "es5",

    "module": "commonjs",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false,

    "suppressImplicitAnyIndexErrors": true,

    "noStrictGenericChecks": true,

     "lib": [ "es2015", "dom", "scripthost" ],

    "typeRoots": [

      "node_modules/@types"

    ],

    "types": []

  },

  "exclude": [

    "wwwroot",

    "typings"

  ]

}

typings.json : This file is used to run the javascript ,jasmine and node pacakges.

For this Please install core-js ,jasmine and node packages under node_modules. 

6.       Create Startup.ts in your root of your application.

Below is the sample code of the startup.ts file.In this file we have mentioned starting module which gets run when our application launched first time.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { EmployeeAppModule } from './Modules/EmpApp.module';

import { environment } from './Client/Modules/app-config.module';

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

const platform = platformBrowserDynamic();

enableProdMode();

platform.bootstrapModule(EmployeeAppModule);

    7.       systemjs.config.js: In this file we add all third-party library/packages references.

In this file we store the location of all angular 2 packages and third-party packages.