Separate Angular2 TypeScript files and JavaScript files into different folders, maybe 'dist‘

Probably late but here is a two-step solution.

Step 1

Change system.config.js by updating 'app' to 'dist/app':

var  map = {    'app':                        'app', // 'dist/app',    .    .    .};

Now it will look like this:

var  map = {    'app':                        'dist/app', // 'dist/app',    .    .    .};

Step 2

Create the dist folder.

Edit tsconfig.json and add:

"outDir": "dist"

The resulting tsconfig.json:

{  "compilerOptions": {    .    .    .    .    "outDir": "dist" // Pay attention here  },  "exclude": [    .    .    .  ]}

Run npm start and you should see all the compiled .js and .map.js files in the dist folder.

Note: Go through other answers. They are quite useful and informative too.

My solution is a bit different from the above.I was starting from the Angular2 Quickstart seed defined here: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

And then only changed the following:

• Added "outDir": "../dist" to tsconfig.json
• Changed the baseDir attribute inside bs-config.json to "baseDir": ["dist", "src"]

Then npm run start works as before (even html/css and other files without any copying), but compiled .js and .map files are built into dist/app and won't pollute your src/app directory.

Please note that I haven't tested how this affects testing yet.

I may be also late but I did this.

First do what raheel shan said.

Then create the dist folder.

After creating the folder go to the file tsconfig.json and add this:

"outDir": "dist"

The resulting tsconfig.json

{  "compilerOptions": {    "target": "es5",    "module": "commonjs",    "moduleResolution": "node",    "sourceMap": true,    "emitDecoratorMetadata": true,    "experimentalDecorators": true,    "removeComments": false,    "noImplicitAny": false,    "outDir": "dist"  },  "exclude": [    "node_modules",    "typings/main",    "typings/main.d.ts"  ]}

If you now run npm start and save a file you should see all the compiled .js and .map.js in the dist folder.