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"/>

这是我的app控制器：

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

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

Answer 4

这就是我让你的世界工作的方式。希望它有所帮助。

创建一个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。您可以在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 ts文件

4 个答案: