Angular 2 + Typescript compiler copy html and css files

本小妞迷上赌 提交于 2019-11-27 19:39:42

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

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.

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!

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.

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

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/", "/"),
...
});

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!