Question

已经有几周了，我一直在寻找解决方案。我使用ng generate库创建了一个带有UI的库，用于这里正在工作的新的Web项目...实际上，每个component中的“ template library”中都有 ViewEncapsulation.None 设置...我知道这不是我们应该使用 Angular 的方式，但是这将使我们能够重复使用前几年所做的所有艰苦的工作。

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

我想给我的用户一个原子单位，而只需要在他们的 template-lib-tag 中设置 app.component.html ，他们重新设置好...，则只需添加要在模板设计中显示/使用的 content components。

我已经尝试了几乎所有可以“打包”资产的内容，但是我要么遇到错误，要么指出 Data path "" should NOT have additional properties(styles) 。当我尝试将资产或样式添加到 angular.json ...时，或者执行不了我想要的结果时错误，提示在 ng服务期间找不到资产。

我对Angular图书馆有太多要求吗？还是一个充满components及其CSS的库不是我可以plug插入任何其他Angular应用程序的原子单元？

我在做什么错/误解，我们应该如何将资产“打包”到我们的库中，以便它们在安装软件包时随身携带。

感谢提前澄清。

Answer 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 width="300" alt="Angular Logo" 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>

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

1 个答案: