在您的 Angular 6 库中包含“资产”

Posted 2023-03-06

【中文标题】在您的 Angular 6 库中包含“资产”

【英文标题】：Include "assets" in your angular 6 library

【发布时间】：2018-12-06 12:02:19

【问题描述】：

现在已经有几个星期了，我一直在寻找解决方案。 我创建了（使用 ng generate 库）一个带有 UI 的库，用于工作中的新 web 项目......事实上，“template library”中的每个component 都有 ViewEncapsulation.None 集。 .. 我知道这不是我们应该使用 Angular 的方式，但它可以让我们重用前几年所做的所有辛勤工作。

我想将样式表(.css files)“打包”到library 中，这样当有人执行“npm install templatelib”时，他/她会自动将所有样式和字体包含在他们的应用程序中，不需要手动将styles和fonts复制到他们的src/app中。

我想给我的用户一个原子单位，某人只需要在他们的 app.component.html 中设置一个 template-lib-tag 并且他们都设置好了。 .. 那么他们只需要添加他们想要在模板设计中显示/使用的 content components。

我已经尝试了几乎所有我能找到的“打包”资产，但我要么收到错误消息，指出 Data path "" should NOT have additional properties(styles).当我尝试将 assets 或 styles 添加到 angular.json... 或者它没有做我想要它做的事情时在 ng 服务期间找不到资产的错误。

我对 Angular 库的要求太高了吗？或者是一个充满components 和他们的CSS 的库不是我可以plug 进入任何其他Angular 应用程序的原子单元？

我做错了什么/误解了，我们应该如何将资产“打包”到我们的库中，以便在安装包时它们可以一起移动。

感谢您提前澄清。

【问题讨论】：

当我尝试将 assets 子句添加到 angular-cli 选项 JSON 时，出现相同的“数据路径”错误。现在我只是在package.json 中将cp -a /path/to/source/. /path/to/dist 附加到我的构建命令中

为什么不通过一个项目运行多个应用程序？ github.com/angular/angular-cli/wiki/stories-multiple-apps

我在一个项目中运行 10 个应用程序，它们都共享一个库文件（因此所有应用程序都加载并缓存一次）以及是否需要对一个组件进行任何更改（例如电话输入组件中的错误）一切都会随着一次构建而改变，所以......但是，如果您需要了解我所做的一切（长篇大论），我应该写一篇关于它的文章。希望有什么问题可以帮到你。

这个问题描述的可读性不太好

您如何引用angular.json 文件中的样式表？通过'node_modules/package/path/to/style/sheet.css' 之类的语法直接在angular.json 文件中引用文件，我已经成功地能够从应用程序中的节点模块添加样式表（我们有一个包含css、图像、字体和js 文件的公司样式指南打包和通过内部 npm repo 分发）。此外，我创建了一个 Angular CLI 示意图，负责将所有这些文件添加到 angular.json 文件中。

【参考方案1】：

ViewEncapsulation.None 的解决方案已经步入正轨。您可以在库中创建一个容器组件，其中包含全局所需的所有样式。然后按照您在帖子中的建议将该组件用作应用程序中的根标记。然后样式会自动包含在整个页面中。

示例组件如下所示：

import  Component, ViewEncapsulation  from '@angular/core';

@Component(
  selector: 'lib-assetlib',
  template: '<ng-content></ng-content>',
  styleUrls: ['assetlib.component.css', 'libstyles.css'],
  encapsulation: ViewEncapsulation.None
)
export class AssetlibComponent 

您可以在 styleUrls 中导入许多 css 文件，正如您在我的示例中看到的那样。 然后，您只需将其添加为 app.component 模板中的根标记，样式就会全局应用于整个页面。无需引用 angular.json 中的任何内容。

示例应用组件：

<lib-assetlib>
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to  title !
  </h1>
  <img   src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
<i class="fas fa-stroopwafel"></i> <!--This uses a style that comes from the library-->
</lib-assetlib>

【讨论】：

这是否可以增强以共享 scss，例如允许共享 mixin 吗？

否，因为如果您将 scss 放在组件的 styleUrls 中，则会在构建库时对其进行处理。您只能通过在库中将带有 mixins 的 scss 文件添加为资产，然后将它们导入到要使用 node_modules/[yourlibraryname] 文件夹中的 mixins 的组件 scss 文件中来做到这一点。

我正在使用这种方法 - 感谢您的启发。但是我很挣扎，因为我的库需要使用特定的字体......我怎样才能将这些字体包含在库中？ （它们是内部字体，因此更愿意将它们打包而不是指定 URL）

您可以将字体作为 base64 字符串包含在 CSS 中。请参阅此post。因此，您需要做的就是将字体转换为 base64 并将它们放入组件的 CSS 样式中。