Angular 2 + Typescript compiler copy html and css files

Question

In Angular2 I would have

"outDir": "dist/app" 

in tsconfig.json. As a result the transpiled .js and .map files are generated in /dist/app/ folder and/or its sub folders. That works all fine.

In my components.ts files I also used referenced html and css like this

@Component({   selector: 'my-app',    templateUrl: 'app/appshell/app.component.html',   styleUrls: ['app/appshell/app.component.css'],   ...... } 

Is there any way to make compiler to also copy the referenced html and css files for the whole project? If yes, how would I configure my tsconfig.json?

I looked into the compiler options here https://www.typescriptlang.org/docs/handbook/compiler-options.html but didn't find anything about copying html/css files.

Update: My folder structure is like this

Root   |--app       // for ts   |--dist/app  // for js 

tsconfig.json

"outDir": "dist/app" 

package.json

{   "name": "TestApp",   "version": "1.0.0",   "scripts": {     "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",     "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;",     ...... } 

It doesn't copy html files. There is no error though.

Update again:

For those who are on Linux OS, Bernardo's solution is a working one. For those who are on Windows OS, the following should work.

  "scripts": {     "html": "XCOPY /S /y .\\app\\*.html .\\dist\\app" } 

Answer 1

For an OS independent solution, use copyfiles

npm install copyfiles --save-dev 

Then add a script to package.json

"scripts": {   "html": "copyfiles -u 1 app/**/*.html app/**/*.css dist/" } 

Now npm run html should copy all css and html files from the app/ folder to dist/app/

EDIT: I'd like to amend my answer to point out angular-cli. This command line tooling utility is supported by the angular team and makes bundling a breeze (ng build --prod), among other things.

Answer 2

No, the TypeScript compiler is just for *.ts file.

You have to copy other files like *.html and *.css using a copy method like cp shell command inside a npm script or grunt-contrib-copy for example.

Example using npm script:

"scripts": {   "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;" } 

Just run npm run html in the shell.

Example using grunt:

copy: {       html: {           src: ['**/*.html'],           dest: 'dist',           cwd: 'app',           expand: true,       } }