Angular2，TypeScript 未在 Visual Studio 2013 中构建答案

【问题标题】：Angular2 ,TypeScript not build in Visual Studio 2013Angular2，TypeScript 未在 Visual Studio 2013 中构建
【发布时间】：2017-09-28 03:29:14
【问题描述】：

我是 angular2 和 TypeScript 的新手。此外，我正在尝试使用 Visual Studio 2013 设置 angular2。我按照 angular2 站点的 5 分钟快速入门教程进行操作。这是我的代码
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>

当我构建项目时，它没有显示错误。但是运行时它不显示任何内容。我不知道为什么..??我想念什么吗？ Visual Studio针对.ts文件创建的js文件如下

app.component.js--从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 -- 从 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

谁能描述一下问题出在哪里？

【问题讨论】：

当应用程序在浏览器中午餐时，您是否至少看到 Loading..？它在控制台日志中有什么说明吗？（按 F12，然后导航到控制台）
您可以尝试使用Angular 2 CLI 的ng serve，然后在您从 Visual Studio 编辑+保存文件时就会看到。大多数人使用Visual Studio Code，这是开箱即用的Angular 2。

标签： visual-studio-2013 typescript angular

【解决方案1】：

在您的代码示例中，我看到了与教程的一些差异。几天前这对我有用（在 Visual Studio 2015 中，但这不应该有区别，因为您可以将其成功编译为 JS）..

我有 TypeScript 项目（在 VS 解决方案中类型称为 HTML Application with TypeScript）

这应该是您的起始文件集：

所有文件的内容可以完全相同，如教程末尾：https://angular.io/guide/quickstart

希望这会有所帮助。

【讨论】：