tsc --out weird behavior when using 'import' in my files

Question

I have two typescript files, app.ts, and `angular2.d.ts' (which contains type definitions for angular2)

my tsconfig.json file looks like so:

{
"compilerOptions": {
    "module": "commonjs",
    "out": "public/all.js",
    "sourceMap": true,
    "watch": true,
    "target": "ES5"
},
"files": [
    "typings/angular2/angular2.d.ts",
    "src/app.ts"   
]}

Expected result - public/all.js would contain the compiled ts file.

Actual result - src/app.js file is created, that contains the compiled ts file. public/all.js is also created, but it only contains the following line: //# sourceMappingURL=all.js.map (i.e. just the source mapping, no actual code)

When investigating further, the problematic line is: import {Component, View, bootstrap} from 'angular2/angular2'; in src/app.ts. as soon as I remove that line everything compiles correctly. as soon as i put it back - it causes the aforementioned problem.

What am I doing wrong?

i'm using it without app.ts to make sure it compiles everything in my folder, as i have angular2.d.ts also in typings folder. however, when i did what u suggested it worked, which led me to understand that the actual problem is with the `import` directive (`import {Component, View, bootstrap} from 'angular2/angular2';`). as soon as i put it there, it creates the aforementioned problem. I'm updating my question — Elad Katz, Jun 03 '15 at 02:21
I imagine that the compiler needs a starting point, otherwise the dependency tree would be unclear. — Bilal Akil, Jun 03 '15 at 02:22

score 2 · Accepted Answer · edited May 23 '17 at 11:58

2

Settings "out":"public/all.js" and "module":"commonjs" are mutually exclusive. You should either:

Use internal modules and let the compiler concatenate output file for you (remove module setting from config);
@basarat would advise you against it, but I think it's not that bad, especially for small projects.
Use external modules and concatenate output files with other tools (set "outDir":"public/" and remove out setting from config).

commonjs modules are meant for Node.js, amd modules are meant for require.js. If you're doing frontend development, it's best to use amd or internal modules.

edited May 23 '17 at 11:58

Community

1
1

answered Jun 03 '15 at 10:20

zlumer

6,844
1
25
25

what are external/internal modules? – Elad Katz Jun 03 '15 at 10:33
1

http://www.typescriptlang.org/Handbook#modules Basically, internal modules are just compiled JS, while external modules provide some sort of wrapping for common module systems (`commonjs` or `amd`). – zlumer Jun 03 '15 at 10:41

score 0 · Answer 2 · answered Jun 03 '15 at 02:10

0

Pass in the file

tsc app.ts --out all.js

answered Jun 03 '15 at 02:10

basarat

261,912
58
460
511

tsc --out weird behavior when using 'import' in my files

2 Answers2