Typescript 编译Angular2TS文件

我正在尝试使用Typescript的Angular2，但我在tsc上遇到了问题

这是我的tsconfig.json文件：

{
"compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "out": "compiled.js",
    "emitDecoratorMetadata":true,
    "target":"es5"
},
"files": [
    "ts/_base/_all.ts"
]
}

这是my_all.ts文件：

///<reference path="./typings/libs.d.ts"/>
///<reference path="../app.ts"/>
///<reference path="../controllers/loginCtrl.ts"/>

通常运行tsc时，我会得到一个单独的输出文件（compiled.js），但使用angular2时，我会为每个ts文件得到一个.js文件（因此tsc不会合并输出）

我注意到使用import语句时出现了问题：

import {Component, View, bootstrap} from 'angular2/angular2';

省略这一行，输出被正确合并（但没有导入，我无法使用模块）

---

我做错了什么？

是否安装了angular2类型定义

tsd install angular2 --save

通常运行tsc时，我会得到一个单独的输出文件（compiled.js），但使用angular2时，我会为每个ts文件得到一个.js文件（因此tsc不会合并输出）

这是因为您正在这里使用

import

：

import{Component，View，bootstrap}来自'angular2/angular2'这使您的代码成为一个外部模块（更多信息：）

注意：我推荐使用外部模块而不是
--out
，总之：
这是Typescript的常见行为，因为您正在定义commonjs（-m commonjs/“模块”：“commonjs”）。在最新版本的Typescript和angular2 alpha27+Systemjs 0.18.1中，模块导入似乎存在问题


为避免此错误，请将.js添加到您导入的任何其他模块中，例如您可能在angular2中创建的自定义指令、控制器和服务。Angular2仍处于测试阶段，可从code.angular.io公开获取的版本在ES5中。等待ES6版本落地或自己编译，以避免出现这种情况。
这就是我如何让hello world工作的。希望能有帮助

创建一个tsd.json文件并运行tsd命令，该命令将下载打字并放入打字文件夹中

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "angular2/angular2.d.ts": {
      "commit": "212793c4be051977f73675fa9bb125d891df037a"
    },
    "angular2/router.d.ts": {
      "commit": "212793c4be051977f73675fa9bb125d891df037a"
    },
    "es6-promise/es6-promise.d.ts": {
      "commit": "35119c83fe214d18c7e370a678cd85dfcfbfa42a"
    },
    "rx/rx.d.ts": {
      "commit": "8fea426543e19e19db32eb827a02d11bdab30383"
    },
    "rx/rx-lite.d.ts": {
      "commit": "0a183cdfaf4ad480164696cd3d47e32650be8016"
    }
  }
}

然后在tsConfig中添加fileGlob，而不是单个文件

{
    "version": "1.5.0",
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "emitDecoratorMetadata": true,
        "outDir": "./dist/atom"
    },
    "filesGlob": [
        "./app/**/*.ts",
        "!./node_modules/**/*.ts"
    ]
}

你不需要所有的。您可以在app controller中导入打字

/// <reference path="../typings/tsd.d.ts" />

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'my-app'
})
@View({
    template: `Hi`
})

class MyAppComponent 
{   
    constructor() 
    {
    }
} 

bootstrap(MyAppComponent); 

//
从'angular2/angular2'导入{组件、视图、引导程序}；
@组成部分({
选择器：“我的应用程序”
})
@看法({
模板：`嗨`
})
类MyAppComponent
{   
构造函数（）
{
}
} 
bootstrap（MyAppComponent）；
谢谢你，basarat，我看了你的视频，但我仍然不知道如何让它工作。。。输出文件（compiled.js）包含与_all相同的内容。ts@basarat那么Typescript允许外部模块导入，但不能配置为将这些导入与您的模块捆绑在一起？这不是违背了捆绑销售的目的吗？只捆绑“内部/私有”模块不是任意的吗？导入时，外部/内部模块之间的线条完全模糊。为什么不捆绑所有内容？angular2的定义正确地引用了_all.ts（//）
/// <reference path="../typings/tsd.d.ts" />

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'my-app'
})
@View({
    template: `Hi`
})

class MyAppComponent 
{   
    constructor() 
    {
    }
} 

bootstrap(MyAppComponent);