A day with .Net

My day to day experince in .net

Posts Tagged ‘Angular2 VS Code’

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

Posted in Uncategorized | Tagged: , | Leave a Comment »