[英]Angular 2 + Typescript compiler copy html and css files
In Angular2 I would have 在Angular2中我会有
"outDir": "dist/app"
in tsconfig.json. 在tsconfig.json中。 As a result the transpiled .js and .map files are generated in /dist/app/ folder and/or its sub folders. 因此,转换后的.js和.map文件将在/ dist / app /文件夹和/或其子文件夹中生成。 That works all fine. 这一切都很好。
In my components.ts files I also used referenced html and css like this 在我的components.ts文件中,我也使用了像这样引用的html和css
@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? 有没有办法让编译器也复制整个项目的引用的html和css文件? If yes, how would I configure my tsconfig.json? 如果是,我将如何配置我的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. 我查看了https://www.typescriptlang.org/docs/handbook/compiler-options.html中的编译器选项,但没有找到任何有关复制html / css文件的信息。
Update: My folder structure is like this 更新:我的文件夹结构是这样的
Root
|--app // for ts
|--dist/app // for js
tsconfig.json tsconfig.json
"outDir": "dist/app"
package.json 的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. 它不会复制html文件。 There is no error though. 但是没有错误。
Update again: 再次更新:
For those who are on Linux OS, Bernardo's solution is a working one. 对于那些使用Linux操作系统的人来说,Bernardo的解决方案是一个有效的解决方案。 For those who are on Windows OS, the following should work. 对于那些使用Windows操作系统的用户,以下应该可以使用。
"scripts": {
"html": "XCOPY /S /y .\\app\\*.html .\\dist\\app" }
For an OS independent solution, use copyfiles 对于独立于操作系统的解决方案,请使用copyfiles
npm install copyfiles --save-dev
Then add a script to package.json 然后向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/ 现在npm运行html应该将app /文件夹中的所有css和html文件复制到dist / app /
EDIT: I'd like to amend my answer to point out angular-cli . 编辑:我想修改我的答案,指出angular-cli 。 This command line tooling utility is supported by the angular team and makes bundling a breeze (ng build --prod), among other things. 角度团队支持此命令行工具实用程序,并使捆绑变得轻而易举(ng build --prod)等。
No, the TypeScript compiler is just for *.ts file. 不,TypeScript编译器仅适用于* .ts文件。
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. 你必须使用像np脚本中的cp
shell命令或grunt-contrib-copy这样的复制方法来复制其他文件,如* .html和* .css。
Example using npm script: 使用npm脚本的示例:
"scripts": {
"html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;"
}
Just run npm run html
in the shell. 只需在shell中运行npm run html
。
Example using grunt: 使用grunt的示例:
copy: {
html: {
src: ['**/*.html'],
dest: 'dist',
cwd: 'app',
expand: true,
}
}
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 \\\\;" “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 在一条指令中编译和复制html和css文件我也添加了这个
"clean": "rm -rf dist" “干净”:“rm -rf dist”in order to remove the whole directory dist . 为了删除整个目录dist 。 Hope this help! 希望这有帮助!
This approach is provided by Microsoft:- 这种方法由Microsoft提供: -
https://github.com/Microsoft/TypeScript-Node-Starter https://github.com/Microsoft/TypeScript-Node-Starter
Check out the file "copyStaticAssets". 查看文件“copyStaticAssets”。 None of the solutions above worked for me, so I hope this helps someone like me. 以上解决方案都不适合我,所以我希望这能帮到像我这样的人。
@yesh kumar, Thanks for sharing the link. @yesh kumar,感谢您分享链接。 Here the steps I did 这是我做的步骤
copyStaticAssets.ts
file 将静态资产添加到copyStaticAssets.ts
文件 import * as shell from "shelljs"; shell.cp("-R", "lib/certs", "dist/");
ts-node copyStaticAssets.ts
in package.json
script section 在package.json
脚本部分配置ts-node copyStaticAssets.ts
"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. 作为我在这里详细解答的替代方案: https : //stackoverflow.com/a/40694657/986160可能是将你的css和html与ts文件保留在一起。 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 :) 然后你可以使用module.id,它将指向组件的js的路径,并在相应地转换它之后你基本上可以使用相对路径:)
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. 作为我在这里使用nodemon
的另一种选择: 观看模板文件并将它们复制到dist /文件夹可以使用package.json
进行配置,将你的css和html文件放在主机操作系统的简单复制commnad中。
But, in this days, you have Webpack
in the Angular 4/5 ecosystem. 但是,在这几天,你在Angular 4/5生态系统中拥有Webpack
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.