在angular 6库中包含“资产”

Question

为了“打包”这些资产，我已经尝试了几乎所有可能的方法，但我要么得到错误，说明数据路径“”不应该有额外的属性（样式）。当我试图向Angular.json添加资产或样式时······或者它没有执行我希望它执行的操作，导致在ng服务期间无法找到资产的错误。

我是不是对角库要求太高了？还是一个充满组件及其CSS的库不是一个原子单元，我可以插入任何其他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 {
}

您可以在样式URL中导入许多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>