Setup Angular Environment On Visual Studio 2017

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

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.

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. ];
24. function packUmd(pkgName) { packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' } }
26. ngPackageNames.forEach(packUmd);
29. var config = {
30. map: map,
31. packages: packages
32. };
34. System.config(config);
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
  
  
  

12. 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';
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';
4. platformBrowserDynamic().bootstrapModule(AppModule);

app.component.ts

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

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

14. Add the following code under the form tag on the same Web Form file.
    
    1. <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.