Use Visual Studio 2015 to develop Angular2 Application

Install node.js

Go to the project folder, where package.json is located and run npm install command

  • Make sure you have npm installed
  • Open up your console of choice (e.g. command prompt or powershell)
  • Install typings by running npm install typings –global
  • Navigate to your project folder within the console
  • Write typings install dt~jquery –save –global

This should update your typings.json file and download the definition files.

npm uninstall angular2

npm install –save @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic rxjs@5.0.0-beta.6 zone.js@0.6.12

update npm:
npm install npm -g

npm install git+

There are multiple reason behind this error,

1)Sometimes comments mentioned on top of app.component.ts file
2)pointing to incorrect umd file
3)If you are using ts(Transcript) version, please mention the transpiler options in config.js file as below or compile your all .ts file to .js file using transpiler and then reference .js file in code:

(function (global) {

transpiler: 'ts',
typescriptOptions: {
tsconfig: true

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-brower-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',
'angular2' : ''

// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main',
defaultExtension: 'ts'

rxjs: {
defaultExtension: 'js'

'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'