编译Angular2 ts文件答案

【问题标题】：Compile Angular2 ts file编译Angular2 ts文件
【发布时间】：2015-05-25 21:00:07
【问题描述】：

我正在使用 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"
]
}

这是我的 _all.ts 文件：

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

这是我的应用控制器：

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

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

class MyAppComponent 
{   
    constructor() 
    {
    }
} 

bootstrap(MyAppComponent);

正常运行 tsc 我得到一个输出文件 (compiled.js)，但是使用 angular2 我为每个 ts 文件得到一个 .js 文件（所以 tsc 没有合并输出）...

我注意到使用 import 语句存在问题：

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

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

我做错了什么？

【问题讨论】：

标签： typescript angular typescript1.5 tsc

【解决方案1】：

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

这是因为您在此处使用import：import {Component, View, bootstrap} from 'angular2/angular2'; 这使您的代码成为外部模块（更多：https://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1）。

注意：无论如何我推荐外部模块而不是--out :https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

【讨论】：

谢谢 basarat，我看了你的视频，但我仍然不知道如何让它工作......输出文件（compiled.js）包含与 _all.ts 相同的内容
@basarat 所以 Typescript 允许外部模块导入，但不能配置为将这些导入与您的模块捆绑在一起？这不是违背捆绑的目的吗？只捆绑“内部/私有”模块不是任意的吗？通过导入，外部/内部模块之间的界限完全模糊。为什么不捆绑所有东西？

【解决方案2】：

您是否安装了 angular2 类型定义？

tsd install angular2 --save

【讨论】：

angular2的定义在_all.ts中正确引用( /// )

【解决方案3】：

这是 Typescript 的常见行为，因为您正在定义 commonjs (-m commonjs/ "module":"commonjs")。使用最新版本的 Typescript 和 angular2 alpha27+Systemjs 0.18.1，模块导入似乎存在问题

https://github.com/systemjs/systemjs/issues/434

为避免此错误，请将 .js 添加到您导入的任何其他模块中，例如您可能在 angular2 中创建的自定义指令、控制器和服务。 Angular2 仍处于测试阶段，可从 code.angular.io 公开获得的版本在 ES5 中。等待 ES6 版本登陆或自行编译以避免这种情况。

【讨论】：

【解决方案4】：

这就是我让我的 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"
    ]
}

您不需要 _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);

【讨论】：