Shawn Shawn - 18 days ago 35
TypeScript Question

Angular 2 + Typescript compiler copy html and css files

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

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,
      }
}