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\         


        

Answer 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

Answer 2

Did you install the angular2 type definitions?

tsd install angular2 --save

Answer 3

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

Answer 4

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.