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?

更新 06/05/2018

我就此事向 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.

当然，我没有运行 ng build，而是运行 npm run 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屋！