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

Answer 3

From the Bernardo's answer I changed this

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

"html": "cd app && tsc && find . \( -name '.html' -or -name '*.css' \) -type f -exec cp --parents {} ../dist \\;"

"clean": "rm -rf dist"

dist

Answer 4

This approach is provided by Microsoft:-
https://github.com/Microsoft/TypeScript-Node-Starter
Check out the file "copyStaticAssets". None of the solutions above worked for me, so I hope this helps someone like me.

Answer 5

@yesh kumar, Thanks for sharing the link. Here the steps I did

• Installshelljs
• Add static assets to copyStaticAssets.ts file

import * as shell from "shelljs";

shell.cp("-R", "lib/certs", "dist/");

• Configure ts-node copyStaticAssets.ts in package.json script section

  "scripts": {
    "build": "tsc && npm run copy-static-assets",
    "prod": "npm run build && npm run start",
    "copy-static-assets": "ts-node copyStaticAssets.ts"
   }

Answer 6

As an alternative from my detailed answer here: https://stackoverflow.com/a/40694657/986160 could be to leave your css and html with the ts files. Then you can use module.id which will have the path pointing to the js of the component and after converting it accordingly you can essentially use relative paths :)

For your case I think something like that will work:

@Component({
   moduleId: module.id.replace("/dist/", "/"),
...
});

Answer 7

As an alternative using nodemon from my answer here: Watch template files and copy them to dist/ folder could be configured using package.json to put your css and html files with a simple copy commnad of your host OS.

But, in this days, you have Webpack in the Angular 4/5 ecosystem.