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

    visual studio

    Open Visual Studio Code Application, click on Open folder and subsequently create new folder “Angular_FirstApp” from the new Window.

    visual studio

  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

    visual studio

    visual studio

    Package.json
    1. {  
    2.     "name""angular-quickstart",  
    3.     "version""1.0.0",  
    4.     "scripts": {  
    5.         "start""tsc&& concurrently \"tsc -w\" \"lite-server\" ",  
    6.         "lite""lite-server",  
    7.         "postinstall""typings install",  
    8.         "tsc""tsc",  
    9.         "tsc:w""tsc -w",  
    10.         "typings""typings"  
    11.     },  
    12.     "licenses": [{  
    13.         "type""MIT",  
    14.         "url""https://github.com/angular/angular.io/blob/master/LICENSE"  
    15.     }],  
    16.     "dependencies": {  
    17.         "@angular/common""~2.1.0",  
    18.         "@angular/compiler""~2.1.0",  
    19.         "@angular/core""~2.1.0",  
    20.         "@angular/forms""~2.1.0",  
    21.         "@angular/http""~2.1.0",  
    22.         "@angular/platform-browser""~2.1.0",  
    23.         "@angular/platform-browser-dynamic""~2.1.0",  
    24.         "@angular/router""~3.1.0",  
    25.         "@angular/upgrade""~2.1.0",  
    26.   
    27.         "angular-in-memory-web-api""~0.1.5",  
    28.         "bootstrap""^3.3.7",  
    29.         "core-js""^2.4.1",  
    30.         "reflect-metadata""^0.1.8",  
    31.         "rxjs""5.0.0-beta.12",  
    32.         "systemjs""0.19.39",  
    33.         "zone.js""^0.6.25"  
    34.     },  
    35.     "devDependencies": {  
    36.         "concurrently""^3.0.0",  
    37.         "lite-server""^2.2.2",  
    38.         "typescript""^2.0.3",  
    39.         "typings""^1.4.0"  
    40.     }  
    41. }  
    tsconfig.json
    1. {  
    2.     "compilerOptions": {  
    3.         "target""es5",  
    4.         "module""commonjs",  
    5.         "moduleResolution""node",  
    6.         "sourceMap"true,  
    7.         "emitDecoratorMetadata"true,  
    8.         "experimentalDecorators"true,  
    9.         "removeComments"false,  
    10.         "noImplicitAny"false  
    11.     }  
    12. }  
    typings.json
    1. {  
    2.     "globalDependencies": {  
    3.         "core-js""registry:dt/core-js#0.0.0+20160725163759",  
    4.         "jasmine""registry:dt/jasmine#2.2.0+20160621224255",  
    5.         "node""registry:dt/node#6.0.0+20160909174046"  
    6.     }  
    7. }  
    systemjs.config.js
    1. /** 
    2.  * System configuration for Angular samples 
    3.  * Adjust as necessary for your application needs. 
    4.  */  
    5. (function(global) {  
    6.     System.config({  
    7.         paths: {  
    8.             // paths serve as alias  
    9.             'npm:''node_modules/'  
    10.         },  
    11.         // map tells the System loader where to look for things  
    12.         map: {  
    13.             // our app is within the app folder  
    14.             app: 'app',  
    15.   
    16.             // angular bundles  
    17.             '@angular/core''npm:@angular/core/bundles/core.umd.js',  
    18.             '@angular/common''npm:@angular/common/bundles/common.umd.js',  
    19.             '@angular/compiler''npm:@angular/compiler/bundles/compiler.umd.js',  
    20.             '@angular/platform-browser''npm:@angular/platform-browser/bundles/platform-browser.umd.js',  
    21.             '@angular/platform-browser-dynamic''npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',  
    22.             '@angular/http''npm:@angular/http/bundles/http.umd.js',  
    23.             '@angular/router''npm:@angular/router/bundles/router.umd.js',  
    24.             '@angular/forms''npm:@angular/forms/bundles/forms.umd.js',  
    25.   
    26.             // other libraries  
    27.             'rxjs''npm:rxjs',  
    28.             'angular-in-memory-web-api''npm:angular-in-memory-web-api',  
    29.         },  
    30.         // packages tells the System loader how to load when no filename and/or no extension  
    31.         packages: {  
    32.             app: {  
    33.                 main: './main.js',  
    34.                 defaultExtension: 'js'  
    35.             },  
    36.             rxjs: {  
    37.                 defaultExtension: 'js'  
    38.             },  
    39.             'angular-in-memory-web-api': {  
    40.                 main: './index.js',  
    41.                 defaultExtension: 'js'  
    42.             }  
    43.         }  
    44.     });  
    45. })(this);  
  5. Install package dependencies

    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.

    dependencies

  6. Create an app folder

    Add app.module.ts file.
    1. Copy the following code into app.module.ts file  
    2. import {  
    3.     NgModule  
    4. } from '@angular/core';  
    5. import {  
    6.     BrowserModule  
    7. } from '@angular/platform-browser';  
    8. @NgModule({  
    9.     imports: [BrowserModule]  
    10. })  
    11. export class AppModule {}  
    12.   
    13. Add app.component.ts file  
    14.   
    15. Copy the following code into app.component.ts file  
    16.   
    17. import {  
    18.     Component  
    19. } from '@angular/core';  
    20. @Component({  
    21.     selector: 'my-app',  
    22.     template: '<h1>My First Angular App</h1>'  
    23. })  
    24. 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
    1. import {  
    2.     NgModule  
    3. } from '@angular/core';  
    4. import {  
    5.     BrowserModule  
    6. } from '@angular/platform-browser';  
    7. import {  
    8.     AppComponent  
    9. } from './app.component';  
    10.   
    11. @NgModule({  
    12.     imports: [BrowserModule],  
    13.     declarations: [AppComponent],  
    14.     bootstrap: [AppComponent]  
    15. })  
    16. export class AppModule {}  
    Add app.main.ts
    1. import {  
    2.     platformBrowserDynamic  
    3. } from '@angular/platform-browser-dynamic';  
    4. import {  
    5.     AppModule  
    6. } from './app.module';  
    7. const platform = platformBrowserDynamic();  
    8. 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
    1. <html>  
    2.   
    3. <head>  
    4.     <title>Angular QuickStart</title>  
    5.     <meta charset="UTF-8">  
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
    7.     <link rel="stylesheet" href="styles.css">  
    8.   
    9.     <!-- 1. Load libraries -->  
    10.     <!--Polyfill(s) for older browsers -->  
    11.     <scriptsrc="node_modules/core-js/client/shim.min.js">  
    12.         </script>  
    13.   
    14.         <scriptsrc="node_modules/zone.js/dist/zone.js">  
    15.             </script>  
    16.             <scriptsrc="node_modules/reflect-metadata/Reflect.js">  
    17.                 </script>  
    18.                 <scriptsrc="node_modules/systemjs/dist/system.src.js">  
    19.                     </script>  
    20.   
    21.                     <!-- 2. Configure SystemJS -->  
    22.                     <scriptsrc="systemjs.config.js">  
    23.                         </script>  
    24.                         <script>  
    25.                             System.import('app').catch(function(err) {  
    26.                                 console.error(err);  
    27.                             });  
    28.                         </script>  
    29. </head>  
    30.   
    31. <!-- 3. Display the application -->  
    32.   
    33. <body>  
    34.     <my-app>Loading...</my-app>  
    35. </body>  
    36.   
    37. </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.

    dependencies

    When you create launch.jsonfile, it will be created under .vscode folder, as shown below.

    dependencies

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

    dependencies

    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.

    dependencies

    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.

    dependencies

    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.

    dependencies

    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.

    Visual Studio Code

    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


Similar Articles