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,
Probably late but here is a two-step solution.
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',
.
.
.
};
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:
"outDir": "../dist" to tsconfig.jsonbaseDir 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.