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?

basarat · Accepted Answer · 2015-05-25 23:43:31Z

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, 2015 at 23:43

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3471528 Over a year ago

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

Jefftopia Over a year ago

@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?

Martin · Accepted Answer · 2015-05-25 22:49:49Z

0

Did you install the angular2 type definitions?

tsd install angular2 --save

answered May 25, 2015 at 22:49

Martin

16.4k4 gold badges51 silver badges58 bronze badges

1 Comment

user3471528 Over a year ago

The definition of angular2 is correctly references in the _all.ts ( ///<reference path="./typings/libs.d.ts"/> )

user2379441 · Accepted Answer · 2015-06-20 02:38:31Z

0

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.

answered Jun 20, 2015 at 2:38

user2379441

1486 bronze badges

Comments

Badal Singh · Accepted Answer · 2015-08-01 10:57:20Z

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

Collectives™ on Stack Overflow

Compile Angular2 ts file

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related