在angular 6库中包含"assets"

Question

我已经好几周了,我正在寻找解决方案.我创建了(使用ng生成库)一个带有UI的库,用于在这里工作的新webproject ...实际上每个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中引用任何内容.

示例app组件:

<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>