将 "assets" 添加到您的 angular 6 库中
Include "assets" in your angular 6 library
现在已经有几个星期了,我一直在寻找解决方案。
我创建了(使用 ng generate library)一个带有 UI 的库,用于工作中的新 webprojects ... 实际上,“template library
”中的每个 component
都有 ViewEncapsulation.None
设置...我知道这不是我们应该使用Angular的方式,但它可以让我们重用所有的硬往年所做的工作。
我想 "pack" 将样式表 (.css files)
放入 library
中,当有人执行“npm install templatelib
”时 he/she 会得到所有样式和字体自动包含在他们的应用程序中,无需手动复制 src/app
.[=29= 中的 styles
和 fonts
]
我想给我的用户一个原子单位,这样别人只需要在他们的 app.component.html
中设置 template-lib-tag
并且它们都已设置...然后他们只需要添加他们想要的 content
components
show/use在模板设计中。
我已经尝试了所有我能找到的关于 "pack" 资产的东西,但我要么收到错误提示 Data path "" should NOT have additional properties(styles)
。当我尝试将 assets 或 styles 添加到 angular.json... 或者它没有做我想让它做的事情,导致在 ng serve.
期间找不到资产的错误
我是不是对 Angular 图书馆要求太高了?或者是一个充满 components
和它们的 CSS
的库不是我可以 plug
进入任何其他 Angular 应用程序的原子单元?
我在做什么 wrong/misunderstanding,我们应该如何 "pack" 将资源放入我们的库中,以便它们在安装包时随行。
感谢您提前澄清。
您使用 ViewEncapsulation.None
的解决方案已经走在了正确的轨道上。您可以在库中制作一个容器组件,其中包含全局所需的所有样式。然后按照您在 post 中的建议,将该组件用作应用程序中的根标记。然后样式会自动包含到整个页面中。
示例组件如下所示:
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>
现在已经有几个星期了,我一直在寻找解决方案。
我创建了(使用 ng generate library)一个带有 UI 的库,用于工作中的新 webprojects ... 实际上,“template library
”中的每个 component
都有 ViewEncapsulation.None
设置...我知道这不是我们应该使用Angular的方式,但它可以让我们重用所有的硬往年所做的工作。
我想 "pack" 将样式表 (.css files)
放入 library
中,当有人执行“npm install templatelib
”时 he/she 会得到所有样式和字体自动包含在他们的应用程序中,无需手动复制 src/app
.[=29= 中的 styles
和 fonts
]
我想给我的用户一个原子单位,这样别人只需要在他们的 app.component.html
中设置 template-lib-tag
并且它们都已设置...然后他们只需要添加他们想要的 content
components
show/use在模板设计中。
我已经尝试了所有我能找到的关于 "pack" 资产的东西,但我要么收到错误提示 Data path "" should NOT have additional properties(styles)
。当我尝试将 assets 或 styles 添加到 angular.json... 或者它没有做我想让它做的事情,导致在 ng serve.
我是不是对 Angular 图书馆要求太高了?或者是一个充满 components
和它们的 CSS
的库不是我可以 plug
进入任何其他 Angular 应用程序的原子单元?
我在做什么 wrong/misunderstanding,我们应该如何 "pack" 将资源放入我们的库中,以便它们在安装包时随行。
感谢您提前澄清。
您使用 ViewEncapsulation.None
的解决方案已经走在了正确的轨道上。您可以在库中制作一个容器组件,其中包含全局所需的所有样式。然后按照您在 post 中的建议,将该组件用作应用程序中的根标记。然后样式会自动包含到整个页面中。
示例组件如下所示:
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>