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

So, to solve this:

Unfortunately, my html/css files is not present in the dist folder. How to do in order to copy all html/css in dist folder ?

Do the steps in both @raheel shan and @Lirianer's answers. ...then you can finish it off with this.

I have solved this for my purposes using npm scripts. The scripts section in my package.json file is below. The solution is to run onchnage (an npm package - npm install --save onchange) concurrently with tsc and the server. Then use rsync to copy the assets you want to move:

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watchassets\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "movesssets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'build/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/"
}

For those of you on Windows you can get rsync via Cygwin or with packaged solutions such as cwRsync.