Compile Angular2 ts file

Question

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?

score 1 · Answer 1 · answered May 25 '15 at 23:43

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

answered May 25 '15 at 23:43

basarat

261,912
58
460
511

Thank you basarat, I watched your video but I still cannot figure out how to make it work... The output file (compiled.js) contains the same content of _all.ts – user3471528 May 26 '15 at 17:35
@basarat So Typescript allows for external module imports but cannot be configured to bundle those imports with your modules? Doesn't that defeat the purpose of bundling? Isn't it arbitrary to only bundle 'internal/private' modules? With import, the lines between external/internal modules is completely blurred. Why not bundle everything? – Jefftopia Nov 20 '15 at 15:12

score 0 · Answer 2 · answered May 25 '15 at 22:49

0

Did you install the angular2 type definitions?

tsd install angular2 --save

answered May 25 '15 at 22:49

Martin

15,820
4
47
56

The definition of angular2 is correctly references in the _all.ts ( /// ) – user3471528 May 27 '15 at 18:50

score 0 · Answer 3 · answered Jun 20 '15 at 02:38

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.

score 0 · Answer 4 · answered Aug 01 '15 at 10:57

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);

Compile Angular2 ts file

4 Answers4

Linked