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

Question

I am using the 5 min quickstart from angular.io website, which contain a file structure like this:

angular2-quickstart
 app
   app.component.ts
   boot.ts
 i         


        

Answer 1

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.