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 /di

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

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 3

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 4

From the Bernardo's answer I changed this

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

for this

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

and is working good. Compile and copy html and css files in one instruction I also added this

"clean": "rm -rf dist"

in order to remove the whole directory dist. Hope this help!

Answer 5

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.

Answer 6

@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"
   }