Xinrui Ma Xinrui Ma - 3 months ago 66
JSON Question

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

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

Probably late but here is a two-step solution.

Step 1

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

var  map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api'
};

Now it will look like this:

var  map = {
    'app':                        'dist', // 'dist',
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' 
};

Step 2

Create the dist folder.

Edit tsconfig.json and add:

"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"
  ]
}

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