编译Angular2 ts文件

Question

我正在尝试使用类型记录的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';

省略这一行，输出将正确合并(但没有导入，我就不能使用模块)。

我做错什么了？

Answer 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

Answer 2

您安装了angular2类型定义吗？

tsd install angular2 --save

Answer 3

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

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

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