How can separate js files and ts files automatically in angular after npm start?

Question

Can I get this result modifying tsconfig.json or package.json?

I want this structure:

angular2-quickstart
  app
    ts
      app.component.ts
      main.ts
    js
      app.component.js
      app.component.js.map
      main.js
      main.js.map
index.html
license.md

no this:

angular2-quickstart
  app
    app.component.ts
    main.ts
    app.component.js
    app.component.js.map
    main.js
    main.js.map
index.html
license.md

Did you consider to use Gulp instead of npm build? There is great article about this topic at http://blog.scottlogic.com/2015/12/24/creating-an-angular-2-build.html — Jan Bouchner, Feb 07 '16 at 12:03
Same problem here http://stackoverflow.com/questions/34684527/separate-angular2-typescript-files-and-javascript-files-into-different-folders/42790972#42790972 — Eugenio, Mar 14 '17 at 16:10

score 3 · Accepted Answer · answered Feb 07 '16 at 12:28

3

Yes, you can tell the TypeScript compiler to output .js files to a different directory using the outDir option in tsconfig.json, and I'd recommend setting the rootDir too so as to avoid unpleasant surprises in the future:

{
  "compilerOptions": {
    "outDir": "app/js",
    "rootDir": "app/ts",
  }
}

Don't forget to adjust paths in index.html.

answered Feb 07 '16 at 12:28

Vadim Macagon

14,463
2
52
45

It's not working in version Angular 2 - rc7. Please Update – Thirumal Sep 14 '16 at 11:33

score 2 · Answer 2 · edited Jan 31 '17 at 07:19

2

If you want to separate out .js and .ts files in angular2, you have to follow only two steps:-

1) Add "outDir":"<folder name where you want to put your js Files>" within compilerOptions object in tsconfig.json file.

2) Map your folder in systemjs.config.js i.e modify the map object like

 map:{
     app:<Folder-Name which you have specified in outDir>
     ----
     ----

 }

edited Jan 31 '17 at 07:19

Dorian

22,759
8
120
116

answered Jan 31 '17 at 06:57

sachin patil

21
1

How can separate js files and ts files automatically in angular after npm start?

2 Answers2