Question

我是angular2和TypeScript的新手。而且我正在尝试使用Visual Studio 2013设置angular2。我跟随angular2 site的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

任何人都能描述出什么问题吗？

Answer 1

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

我有TypeScript项目（VS解决方案类型称为 带有TypeScript的HTML应用程序 ）

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

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

希望这有帮助。

Angular2，TypeScript不在Visual Studio 2013中构建

1 个答案: