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