A day with .Net

My day to day experince in .net

Angular2 Development With Visual Studio Code

Posted by vivekcek on October 24, 2016

In this post, i will show you how we can use VS Code for Angular2 development.
The main thing is how to configure VS Code to transpile typescript to js files and lunch the app.

1. Install NodeJs
2. Install visual studio code.
3. Install TypeScript via NPM (Visual studio code may normally install TypeScript).
4. Create a folder in E, E:\Angular2
5. Open this folder through VS Code.
6. Go to https://angular.io/docs/ts/latest/quickstart.html
7. Create 3 files in VS Code , package.json, tsconfig.json, systemjs.config.js.
1
8. From angular site copy the codes for these files and save.
2
9. Go to NPM and change your directory to E:\Angular2, and issue below command

npm install

3

10. Now create a folder named app, and create below files (Refer angular2 quick start).

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 { }
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
<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 -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="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>

4

11. So everything is ready, now important step to configure TypeScript compiler.
12. Ctrl+Shift+P will open command pallette.
13. Type task and select Configure Task Runner
5
14. Selecet tsconfig.json
6
15. This will create a file named tasks.json, update args section as shown in image (args:[])
7
16. Now click on build and configure launch.json file.
8
17. Update program section as shown.
9
18. Run the app now

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s