Xinrui Ma Xinrui Ma - 4 months ago 358x
AngularJS Question

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

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


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": [

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 file, what should I do to put all my ts files in my regular develop floder like app folder and all the js and 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.



You can transpile .ts files in the browser, just like plunker is doing in their angular 2 ts template.

Just launch editor, select new, then AngularJS, and 2.0.x (TS) option(on the very bottom). But the whole point of using webpack(or any other bundling tool) is to transpile files locally.