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
– Raven, Commented Jun 12, 2017 at 21:02

alehn96 · Accepted Answer · 2017-06-12 23:00:15Z

2

Add

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

to your user settings

edited Jun 12, 2017 at 23:00

answered Jun 12, 2017 at 21:03

alehn96

1,4031 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user Over a year ago

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.

Collectives™ on Stack Overflow

Separating TypeScript and JavaScript files

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related