Shawn Shawn - 2 years ago 218
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

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 but didn't find anything about copying html/css files.

My folder structure is like this

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


"outDir": "dist/app"


"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 Source

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,
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download