Angular2 ,TypeScript not build in Visual Studio 2013

Question

i am new at angular2 and TypeScript. moreover i am trying set up angular2 with Visual Studio 2013. i followed 5 min Quickstart tutorial from angular2 site.here is my code
app.component.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

import { Component } from 'angular2/core';
@Component({
selector: 'myapp',
template: '<h1>My Name is Himadri</h1>'
})
export class AppComponent { }

main.ts

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
 
  
</head>
<body>
    <script>
        System.import('Dev/app.component.js');
        System.import('Dev/main.js');
    </script>
 
    <div id="content">
        <myapp>Loading..</myapp>
    </div>

    
</body>
</html>

when i build the project it shows no error. but the when run it do not show anything. i dont know why..?? do i miss anything?? the js file created by Visual studio against .ts file is as follows

app.component.js--Created from app.component.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var core_1 = require('angular2/core');
var AppComponent = (function () {
    function AppComponent() {
    }
    AppComponent = __decorate([
        core_1.Component({
            selector: 'myapp',
            template: '<h1>My Name is Himadri</h1>'
        })
    ], AppComponent);
    return AppComponent;
}());
exports.AppComponent = AppComponent;

main.js -- created from main.ts

   "use strict";
   var browser_1 = require('angular2/platform/browser');
   var app_component_1 = require('./app.component');
   browser_1.bootstrap(app_component_1.AppComponent);
   //# sourceMappingURL=main.js.map

can any one describe what is the problem?

When the app lunch in the browser, do you see at least the Loading..? Does it says anything in console log? (press F12 and then navigate to Console) — Petr Adam
– Petr Adam, Commented Jun 22, 2016 at 11:19
You could try using the Angular 2 CLI's ng serve and then that'll watch when you edit+save your files from Visual Studio. Most people use Visual Studio Code which is Angular 2 ready out of the box. — Mikeumus
– Mikeumus, Commented Oct 22, 2016 at 23:30

Evan Wieland · Accepted Answer · 2017-09-27 19:29:14Z

0

In your examples of code I see some differences against the tutorial. This worked for me couple of days ago (in Visual Studio 2015, but that shouldn't be the difference, since you can compile it successfully to JS)..

I have TypeScript project (in VS solution type is called HTML Application with TypeScript)

This should be your starting set of files:

Content of all files can be completely identical like at the end of the tutorial: https://angular.io/guide/quickstart

Hope this helps.

edited Sep 27, 2017 at 19:29

Evan Wieland

1,5281 gold badge22 silver badges36 bronze badges

answered Jun 22, 2016 at 12:06

Petr Adam

1,45711 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 ,TypeScript not build in Visual Studio 2013

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related