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
 i         


        

Answer 1

I tried @WillyC's suggestion and worked like a charm, just note that you'll have to add the onchange dependency to your package.json file. I added a little just a little extra scripts to have a clean setup upon first run and also to remove leftover html/css files (it'd be nice if same could be done for TSC)

Anyway, here is a section of my package.json file

{
  ...
  "scripts": {
    "start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
    ...
    "cleandist": "rm -rf dist/*",
    "moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/"
  },
  ...
  "devDependencies": {
    ...
    "onchange":"^3.0.2"
  }
}

For the rsync delete, notice the --delete flag on the rsync command of the watchassets script

Answer 2

I tried few of the above mentioned options and finally, this is what I settled on: Peep - an extension for Visual Studio Code.

How to install:

• View -> Extensions
• Peep
• Install
• Reload
• View -> Command Pallet
• Peep None
• modify .vscode/settings.json as required (mine shown below)

-

{
  "typescript.check.workspaceVersion": false,
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true,
    "node_modules/": true,
    "dist/": true,
    "lib/": true
  }
}

01/25/2017 - updates: angular-cli out of the box, takes care of this. and installation works and now.

Answer 3

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.

Answer 4

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.

Answer 5

I tried the suggestion of @raheel & it worked for me. I have modified the structure according to my needs.

I am using the following structure

To get this I have modified only two files 1. systemjs.config.js and 2.tsconfig.json

In systemjs.config.js I changed to

map: { // previously it was app: 'app', app: 'app/js', ...

and in tsconfig.json I have to add "outDir": "app/js"

Answer 6

Inspired by @Nagyl, I developed my own way and I believe it's worth to share:

1) Install cpx

npm install cpx

2) Update bs-config.json and change baseDir from "src" to "dist"

"baseDir":"dist"

3) Update tsconfig.json and add outDir to end of compilerOptions:

"outDir": "../dist"

4) Update package.json: 4.1) add a new command to end of scripts:

"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"

4.2) modify "start" line to include "cpx" command:

"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",