26

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

我想将样式表“打包”(.css files)到.librarynpm install templatelibstylesfontssrc/app

我想以某种方式为我的用户提供一个原子单元，有人只需要template-lib-tag在他们的中设置 aapp.component.html并且他们都设置好了......然后他们只需要在模板设计中添加他们想要显示/使用的内容。content components

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

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

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

感谢您提前澄清。

4

1 回答 1

8

您的解决方案已经走上了正确的轨道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>
于 2018-07-13T22:21:14.430 回答