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" }
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
inpackage.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" }
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.
来源:https://stackoverflow.com/questions/38708200/angular-2-typescript-compiler-copy-html-and-css-files