Compile Angular2 ts file
I am trying to use 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 application controller:
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'my-app'
})
@View({
template: `Hi`
})
class MyAppComponent
{
constructor()
{
}
}
bootstrap(MyAppComponent);
I usually run tsc, I get one output file (compiled.js), but using Angular2, I get one .js file for each ts file (so tsc doesn't merge the output) ...
I noticed that the problem occurs with the import statement:
import {Component, View, bootstrap} from 'angular2/angular2';
Omitting this line, the output is merged correctly (but without importing, I cannot use the module).
What am I doing wrong?
source to share
I usually run tsc, I get one output file (compiled.js), but using angular2, I get one .js file for each ts file (so tsc doesn't 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 on top --out
anyway: https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md
source to share
This is the usual behavior of Typescript since you are defining commonjs (-m commonjs / "module": "commonjs"). With latest version of Typescript and angular2 alpha27 + Systemjs 0.18.1 there seems to be a problem with importing the module
https://github.com/systemjs/systemjs/issues/434
To avoid this error add .js to any other imported module like custom directives, controllers and services that you can create in angular2. angular2 is still in beta and the one available publicly from code.angular.io is in ES5. Wait for ES6 to land or compile it yourself to avoid these scenarios.
source to share
This is how I did my sweet job in the world. Hope it helps.
Create a tsd.json file and run the tsd command which will download the input and place it in the samples 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 to 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 don't need _all.ts. And you can import typing in the 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);
source to share