Separating TypeScript and JavaScript files

Question

I cloned project from tour of heroes tutorial https://angular.io/docs/ts/latest/guide/setup.html.

And I want to separate .js files to another directory, because now I have .ts, .js and .js.map files all together in one directory.

I tried solve it following the answer from: Separate Angular2 TypeScript files and JavaScript files into different folders, maybe 'dist‘ but after changes in systemjs.config.js and tsconfig.json I get an error:

Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:18 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/app.module
    Error: XHR error (404 Not Found) loading http://localhost:3000/app/app.module
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1056:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/app/app.module as "./app/app.module" from http://localhost:3000/main.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1056:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/app/app.module as "./app/app.module" from http://localhost:3000/main.js

Most editors will put `.js` and `.js.map` 'folded' and hidden if they detect that typescript is used. Nowadays it's not often in a different directory as you describe. — Raven, Jun 12 '17 at 21:02

alehn96 · Accepted Answer · 2017-06-12T23:00:15.707

2

Add

   "files.exclude": {
    "**/*.js.map": true,
    "**/*.js": {
        "when": "$(basename).ts"
    }
},

to your user settings

edited Jun 12 '17 at 23:00

answered Jun 12 '17 at 21:03

alehn96

1,363
1
13
23

I have a problem. My primary directory is app. And when I have all .ts files in this directory I don't see .js and .js.map files. But when I created a directory app/subdir/subdirectory and I put there .ts files I get .js files in directory app. – user Jun 13 '17 at 06:49

Separating TypeScript and JavaScript files

1 Answers1