Xinrui Ma Xinrui Ma - 1 year ago 1232
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.


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download