Compile Angular2 ts file

问题:

I'm trying Angular2 using Typescript, but I have a problem with tsc.

This is my tsconfig.json file:

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

This is my _all.ts file:

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

And this is my app controller:

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

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

class MyAppComponent 
{   
    constructor() 
    {
    }
} 

bootstrap(MyAppComponent); 

Normally running tsc I get a single output file (compiled.js), but using angular2 I get one .js file for each ts file (so tsc does not merge the output)...

I noticed that the problem is present using the import statement:

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

Omitting this line, the output is correctly merged (but without the import I cannot use the module).

What I'm doing wrong?

回答1:

Normally running tsc I get a single output file (compiled.js), but using angular2 I get one .js file for each ts file (so tsc does not merge the output)...

This is because you are using import here : import {Component, View, bootstrap} from 'angular2/angular2'; This makes your code an external module (more : https://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1).

Note: I recommend external modules over --out anyways :https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

回答2:

Did you install the angular2 type definitions?

tsd install angular2 --save

回答3:

This is the usual behaviour of Typescript, as you are defining commonjs (-m commonjs/ "module":"commonjs"). With the latest version of Typescript and angular2 alpha27+Systemjs 0.18.1 there seems to be an issue with module importing

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

To avoid this error add .js to any other module that you import, such as custom directives, controllers, and services that you might create in angular2. Angular2 is still in beta and the one that is publicly available from code.angular.io is in ES5. Wait for an ES6 version to land or compile it yourself to avoid this scenarios.

回答4:

This is how I made my hello world work. Hope it helps.

Create a tsd.json file and run tsd command, which shall download the typing and put in a typings folder

{
  "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"
    }
  }
}

Then add fileGlob in tsConfig instead of individual files

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

You won't need _all.ts. And you can import typings in 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);