Angular 6用资源构建图书馆 [英] Angular 6 building a library with assets
问题描述
在建设&打包Angular 6库后,我似乎无法指示Angular CLI将库的资源复制到每个版本的dist/assets
文件夹中.
Upon building & packaging an Angular 6 library, I can't seem to be able to instruct the Angular CLI to copy the library's assets into the dist/assets
folder on every build.
假设项目的文件夹结构是这个-
Assuming the project's folder structure is this -
- dist
- e2e
- node_modules
- projects
- lib1
- src
- lib
- assets
- icons
- src
当我运行ng build lib1
或ng build lib1 --prod
时,assets/icons
文件夹没有被复制到dist/lib1/assets/icons
中.
When I run ng build lib1
or ng build lib1 --prod
the assets/icons
folder is not being copied into dist/lib1/assets/icons
.
如果我运行ng build
,则将复制src/assets
(根src/assets),但不会复制projects/lib1/assets
.
If I run ng build
then src/assets
(the root src/assets) is being copied but not projects/lib1/assets
.
angular.json
文件包含对"assets": ["src/assets"]
的引用,但不允许将assets
键专门添加到项目中,而只能添加到主根应用程序中.添加时,出现以下错误:
The angular.json
file contains a reference to "assets": ["src/assets"]
but it won't allow adding the assets
key specifically to the project, only to the main root app. When adding, I get the following error:
架构验证失败,出现以下错误:数据路径" 不应具有其他属性(资产).
Schema validation failed with the following errors: Data path "" should NOT have additional properties(assets).
我还尝试将以下自定义复制规则添加到资产,以将资产复制到dist/lib而不是dist/appname:
I also tried adding the following custom copy rule to the assets to copy the assets to dist/lib instead of to dist/appname:
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "**/*", "input": "src/assets/icons", "output": "../lib1/assets/icons" }
],
但是出现以下错误:
无法将资产写入输出路径之外的位置.
An asset cannot be written to a location outside of the output path.
是否有内置的方法来管理每个构建中的图书馆资产的副本?
Is there a built-in way of managing library asset's copy on every build?
更新2018年6月5日
我为此事向Angular CLI提出了一个问题,但尚未收到回音. 问题#11701
I opened an issue with Angular CLI regarding this but have not heard back yet. Issue #11701
推荐答案
当前,我仍然没有找到一种官方的内置方法.
Currently, I still have not found an official built-in way to do so.
我打开了 Angular CLI问题,希望能得到CLI团队的回应
I opened an Angular CLI issue and hopefully will get the CLI team response.
与此同时,我的解决方法是使用命令行工具:
In the meantime my workaround is using command line tools:
在package.json
中我添加了:
"scripts": {
...
"build": "ng build lib1 --prod && scss-bundle -c scss-bundle.config.json && cp -R projects/lib1/src/assets/ dist/lib1/assets/",
}
要复制SASS文件,我将scss-bundle
与包含以下内容的配置文件scss-bundle.config.json
一起使用:
To copy the SASS files I use scss-bundle
with config file scss-bundle.config.json
that contains:
{
"entry": "./projects/lib1/src/assets/style/main.scss",
"dest": "./dist/lib1/assets/style/styles.scss"
}
这会将项目的SASS文件构建为1个文件,并将其复制到dist文件夹中.我的SASS文件结构类似于:
This will build the SASS files of the project into 1 file and copy it into the dist folder. My SASS file structure is something like:
-- projects/lib1/src/assets/
-- style
-- main.scss
-- partials
-- _variables.scss
-- _styles.scss
__ _rtl.scss
因此,正如您所看到的,我不想运送所有原始的sass,而只运送一个最终文件.当然,您也可以将其编译为.css
文件.
So as you can see I don't want to ship all the raw sass, just one final file. Of course, you can also compile it into a .css
file instead.
为确保所有其他资产均被复制,我使用简单的Mac OS/Linux命令cp -R
或rsync
.
To make sure all other assets are copied, I use a simple Mac OS/Linux command cp -R
or rsync
.
当然,我运行的是npm run build
,而不是运行ng build
.
And, of course, instead of running ng build
I run npm run build
.
希望这会有所帮助,如果您有更好的解决方案,请告诉我.
Hope this helps, and if you have a better solution please let me know.
这篇关于Angular 6用资源构建图书馆的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!