typescript - 编译Angular2 ts文件

Question

我正在使用 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';

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

我做错了什么？

score 1 · Accepted Answer

通常运行 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

score 0 · Accepted Answer

0

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

tsd install angular2 --save

于 2015-05-25T22:49:49.600 回答

score 0 · Accepted Answer

这是 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 版本登陆或自己编译以避免这种情况。

score 0 · Accepted Answer

这就是我如何让我的 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);

typescript - 编译Angular2 ts文件

4 回答 4

Related

Reference