Getting Started With Angular 2 Application Using Visual Studio Code

In this article, we will learn the process of developing an Angular 2 application, using Visual Studio Code. Let's start with a step-by-step approach.

1. Install Visual Studio Code
   
   https://code.visualstudio.com/download
   
   Download Visual Studio Code for Windows as this example is for Windows users.
   
   
2. Install npm and TypeScript from nodejs.org
   
   In order to work with AngularJS 2 application, you need a runtime environment.
   Download NodeJS of “V6.9.1 LTS” version from https://nodejs.org/en/.
   
   
3. Create a folder, using Visual Studio code
   
   
   
   Open Visual Studio Code Application, click on Open folder and subsequently create new folder “Angular_FirstApp” from the new Window.
   
   
   
   
4. Create Configuration files
   
   You need to create configuration files in order to work with Angular2 Applications. These configuration files contain the package dependencies to install, to convert the typescript files to JavaScript files and the system configuration settings
   
   Create the following files in Visual Studio Code
   
   Package.json
   tsconfig.json
   typings.json
   systemjs.config.js
   
   
   
   
   
   Package.json
   

   {
       "name": "angular-quickstart",
       "version": "1.0.0",
       "scripts": {
           "start": "tsc&& concurrently \"tsc -w\" \"lite-server\" ",
           "lite": "lite-server",
           "postinstall": "typings install",
           "tsc": "tsc",
           "tsc:w": "tsc -w",
           "typings": "typings"
       },
       "licenses": [{
           "type": "MIT",
           "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
       }],
       "dependencies": {
           "@angular/common": "~2.1.0",
           "@angular/compiler": "~2.1.0",
           "@angular/core": "~2.1.0",
           "@angular/forms": "~2.1.0",
           "@angular/http": "~2.1.0",
           "@angular/platform-browser": "~2.1.0",
           "@angular/platform-browser-dynamic": "~2.1.0",
           "@angular/router": "~3.1.0",
           "@angular/upgrade": "~2.1.0",
   
           "angular-in-memory-web-api": "~0.1.5",
           "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": {
           "concurrently": "^3.0.0",
           "lite-server": "^2.2.2",
           "typescript": "^2.0.3",
           "typings": "^1.4.0"
       }
   }

   tsconfig.json
   

   {
       "compilerOptions": {
           "target": "es5",
           "module": "commonjs",
           "moduleResolution": "node",
           "sourceMap": true,
           "emitDecoratorMetadata": true,
           "experimentalDecorators": true,
           "removeComments": false,
           "noImplicitAny": false
       }
   }

   typings.json
   

   {
       "globalDependencies": {
           "core-js": "registry:dt/core-js#0.0.0+20160725163759",
           "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
           "node": "registry:dt/node#6.0.0+20160909174046"
       }
   }

   systemjs.config.js
   

   /**
    * System configuration for Angular samples
    * Adjust as necessary for your application needs.
    */
   (function(global) {
       System.config({
           paths: {
               // paths serve as alias
               'npm:': 'node_modules/'
           },
           // map tells the System loader where to look for things
           map: {
               // our app is within the app folder
               app: 'app',
   
               // angular bundles
               '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
               '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
               '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
               '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
               '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
               '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
               '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
               '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
   
               // other libraries
               'rxjs': 'npm:rxjs',
               'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
           },
           // packages tells the System loader how to load when no filename and/or no extension
           packages: {
               app: {
                   main: './main.js',
                   defaultExtension: 'js'
               },
               rxjs: {
                   defaultExtension: 'js'
               },
               'angular-in-memory-web-api': {
                   main: './index.js',
                   defaultExtension: 'js'
               }
           }
       });
   })(this);

5. Install package dependencies
   
   
   
   After the configuration files are created, we need to install the package dependencies, defined in package.json ,using npm install command from the command prompt.
   
   Visual Studio Code has built in integrated terminal, which can be used to install the packages
   
   Go to View->click on Integrated Terminal (or) just go for shortcut CTRL+ and then type npm install.
   
   This will install the required packages to start with Angular2 .
   
   Notice node_modules and typings folder are added in the Application.
   
   
   
   
6. Create an app folder
   
   Add app.module.ts file.
   

   Copy the following code into app.module.ts file
   import {
       NgModule
   } from '@angular/core';
   import {
       BrowserModule
   } from '@angular/platform-browser';
   @NgModule({
       imports: [BrowserModule]
   })
   export class AppModule {}
   
   Add app.component.ts file
   
   Copy the following code into app.component.ts file
   
   import {
       Component
   } from '@angular/core';
   @Component({
       selector: 'my-app',
       template: '<h1>My First Angular App</h1>'
   })
   export class AppComponent {}

   Now, it’s time, where we make some changes to app.module.tsfile, call the component file, which we created in the module. A module can hold the multiple components.
   
   The class exported (AppComponent) in the component is defined in the @NgModule under declarations and bootstrap
   
   Change the module file
   

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

   Add app.main.ts
   

   import {
       platformBrowserDynamic
   } from '@angular/platform-browser-dynamic';
   import {
       AppModule
   } from './app.module';
   const platform = platformBrowserDynamic();
   platform.bootstrapModule(AppModule);

   “app.main.ts” file is used to bootstrap the Angular Application by calling the module.
   
   Mainpage.html
   Create HTML page, which will be the start page and it is displayed on the Browser with the help of the components
   

   <html>
   
   <head>
       <title>Angular QuickStart</title>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="styles.css">
   
       <!-- 1. Load libraries -->
       <!--Polyfill(s) for older browsers -->
       <scriptsrc="node_modules/core-js/client/shim.min.js">
           </script>
   
           <scriptsrc="node_modules/zone.js/dist/zone.js">
               </script>
               <scriptsrc="node_modules/reflect-metadata/Reflect.js">
                   </script>
                   <scriptsrc="node_modules/systemjs/dist/system.src.js">
                       </script>
   
                       <!-- 2. Configure SystemJS -->
                       <scriptsrc="systemjs.config.js">
                           </script>
                           <script>
                               System.import('app').catch(function(err) {
                                   console.error(err);
                               });
                           </script>
   </head>
   
   <!-- 3. Display the application -->
   
   <body>
       <my-app>Loading...</my-app>
   </body>
   
   </html>

7. Launch.jsonand tasks.jsonfile
   
   Visual Studio Code uses launch.json and tasks.json file to launch your Angular2 Application.
   
   launch.json
   
   Press F1 or CTRL+SHIFT+P in VS code and type launch in the address bar, select node.js file from the selection.
   
   
   
   When you create launch.jsonfile, it will be created under .vscode folder, as shown below.
   
   
   
   In order to launch the Angular2 Application, launch.json will use the lite-Server defined in node_modules. Change the program property from “${workspaceRoot}/app.js” to “${workspaceRoot}/node_modules/lite-server/bin/lite-server”.
   
   
   
   tasks.json
   
   Press F1 or CTRL+SHIFT+P and type “task”, select “Configure Task runner” and then use “Typescript-Watch Mode” .This will create tasks.json, which will be created under .vscode folder.
   
   
   
   Remove arguments from argsproperty, as we don’t require it now and add new property as “watch”:true.
   
   Now, it’s time to see your first Angular2 Application in the Browser. Run the Application, using CTRL+F5. It will run the Application and see the output in the Browser.
   
   Did you see output as My First Angular App or Loading…? If you see the output as Loading ...in Angular2 Application, then you need to change the code in index.html file to see the output.
   
   
   
   Change the code to “app/app.main.js” from “app”, as shown below. Here, you are referring to the app.main.js file, which is used to bootstrap the Angular2 Application.
   
   
   
   Now, try running the Application. Now, you will be able to see the output as “My First Angular App”.
   
   Now, let’s try to change the text from “My First Angular App’ to “My First Angular2 App” in app.component.ts file and save the file. Go to the Browser and check whether the change is reflected or not. Unfortunately, it doesn’t reflect on the Browser on saving the component file.
   
   If you want to reflect the change in the Browser once you change the page and save it, then you need to add small code in “tsconfig.json” . Add “watch”:true and compileOnSave:true to tsconfig.json file.
   
   
   
   Now, change the text in the component file and save it. If you check the Browser, the change will be reflected without rebuilding the code again.
   
   If you are interested in downloading the code, please follow the link, mentioned below and download the application
   
   https://github.com/sravankumard/Angular2-First-App.git