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  index.html  license.md  package.json  tsconfig.json 

the tsconfig.json is a code block like this ：

{   "compilerOptions": {     "target": "ES5",     "module": "system",     "moduleResolution": "node",     "sourceMap": true,     "emitDecoratorMetadata": true,     "experimentalDecorators": true,     "removeComments": false,     "noImplicitAny": false   },   "exclude": [     "node_modules"   ] }  

Also the package.json:

{   "name": "angular2-quickstart",   "version": "1.0.0",   "scripts": {     "tsc": "tsc",     "tsc:w": "tsc -w",     "lite": "lite-server",     "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "   },   "license": "ISC",   "dependencies": {     "angular2": "2.0.0-beta.0",     "systemjs": "0.19.6",     "es6-promise": "^3.0.2",     "es6-shim": "^0.33.3",     "reflect-metadata": "0.1.2",     "rxjs": "5.0.0-beta.0",     "zone.js": "0.5.10"   },   "devDependencies": {     "concurrently": "^1.0.0",     "lite-server": "^1.3.1",     "typescript": "^1.7.3"   } } 

I change the sourceMap from true to false, so in the code editor, the map file is not generated again, but the js file still get generated.

I want to work on only ts file and don't want to get a brunch of js and js.map file, what should I do to put all my ts files in my regular develop floder like app folder and all the js and js.map files into a folder called dist?

A good example of this might be angular2-webpack-quickstart. But I didn't figure out how they do that?

Any advice how to do that, of course not manually.

Thanks,

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.

Answer 2

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.