问题标签 [angular-library]

我正在尝试将具有多个模块的 Angular 应用程序拆分为多个（单独的）Angular 库（使用本指南），因此我可以在多个 Angular 应用程序中使用这些库。
目前该项目有几个模块，例如：

• 一个用于身份验证/授权；
• 一个包含各种表格组件
• 一个包含各种过滤器组件
• 一个包含各种图表组件
• ...（我想你明白了）...

我开始着手将身份验证/授权模块“转换”为库，因为我预计这将是最难和最复杂的模块。
现在我面临一些问题，我将在下面解释。

该模块（目前存在）结合使用 NgRx 和 ngrx-actions 来减少样板文件。如前所述（在指南中），创建了一个库和一个用于测试该库的应用程序。我将现有模块的所有内容复制到库文件夹中。

必须进行一些调整，因为现有模块从 environment.ts 和 global.ts 读取一些常量，当它用作库时（可能）不存在。

现在我的文件夹结构如下所示，以提供更多上下文（删除了 node_modules）：

public_api.ts 包含以下代码：

auth.module.ts 包含以下代码：

注意：当模块存在于项目中（而不是库）时，这是有效的。
仅供参考：不同的组件正在调度一些操作，例如重定向到（Auth0）登录页面。

然后..当我想在 app.module.ts （“测试应用程序”）中导入 AuthModule 时，出现以下错误，我无法解决。

我看到了这个 GitHub 问题和这个 Stack Overflow 问题，都提出了相同的答案，但它们在我的情况下不起作用。

有没有人知道如何解决这个问题？谢谢！

我正在尝试在 Angular 版本 6 中创建一个应用程序，它可以生成 js 作为输出，应用程序可以直接嵌入到任何应用程序中。

例如。

这里 entryID 用于 div 初始化应用程序并适合 div

我正在尝试创建一个 Angular 6 库。该库正确构建，我可以看到以下文件夹作为输出： bundles esm5 esm2015 fesm5 fesm2015 lib

我的问题是，是否可以简单地导入从这里构建的 js 文件并在普通的 javascript 和 html 中使用它。通过 ng build 生成的库似乎依赖于 angular/core

我一直在构建一个 Angular 6 库。新工艺非常好。

我正在使用以前版本中编写的一些模块及其组件并将它们转换过来。这些组件已经过修饰，使其视图和样式分别为外部文件、html 和 scss。

我正在处理的库还包含scss-bundler在构建过​​程中输出到库文件夹的全局样式。这些样式不包括任何组件样式。

我使用“基础”Angular 应用程序作为组件的演示站点。再次，非常好，我可以使用一个 repo 来构建我的库并部署它的演示。

在应用程序中，我从库的 dist 目录中导入我的全局样式：

这很好用，此时我的组件样式正确，并且应用了全局布局样式。

现在，这就是我遇到问题的地方。SCSS 的原因是能够自定义，对吧？在我的标题组件（位于库中）中，我有一些徽标图像的样式：

在styles.scss（如上所示）中，假设我$logo-height: 68px在@import "../dist/vdl-lib/styles";. 当应用程序运行时，组件的徽标大小不会改变。我可以看到高度设置为我内部“变量”scss 文件中的原始值。

这是 SCSS 或 Angular 中的替换问题吗？看来不是这样！据我所知，何时构建库，输出组件样式已编译为CSS！

在查看了 fesm5 输出的 js 之后，我得出了这个结论。我可以找到组件的装饰器并验证它是 CSS。

我尝试过在组件装饰器上使用styles而不是。styleUrls我删除了我的“变量”scss 文件的导入。这使得输出的 JavaScript 看起来具有 SCSS，但运行演示应用程序显示没有应用任何组件样式。我不确定是否有一些排序问题会阻止在演示应用程序中导入的变量在styles.scss组件中被使用。我还没有尝试定义变量angular.json，但我对此并不抱太大希望。

所以，我的问题是：是否可以让库组件使用和输出 SCSS，以便消费应用程序可以自定义任何布局变量？我是否缺少一些配置设置来告诉 Angular 构建演示应用程序，假设使用的库中的样式是 scss 并且需要编译？

我正在使用 Angular 6.1.0 构建一个库

• ng new lib-demo
• ng generate library my-lib

--prod所有文章都建议使用如下标志运行库的构建：

但是，这会引发错误

这可能是正确的，因为当我查看angular.jsonproduction build configuration时，库项目中没有 a 的定义。它仅适用于应用程序项目。

以下是我在使用的库项目的构建配置下拥有的内容ng-packagr

所以这里的问题是--prod标志不再需要并且只是运行ng build m-lib会生成一个产品构建？

查看 dist 文件夹的内容看起来是这样，但我不是 100% 确定。如果有人可以验证这一点，那就太好了。

我已经在 Angular 6 中创建了一个组件库，我想在我的组件库中全局使用 Angular 材料组件。

我试过导入 app.module.ts （不暴露给库） 我试过改变我的 main.ts 以包含 @NgModule 并导出一个“MainModule”，这个编译得很好，但似乎不是正确的方法去做这个？

我错过了什么吗？希望我有一些代码可以分享，但真的不知道从哪里开始。

任何帮助表示赞赏！

在 Angular 6 中工作我已经成功创建了一个 Angular 组件库并添加了一个包含下拉控件的组件。

我在 app.module 中添加了必要的导入，并让我的库组件显示出来！！！

..使用它的选择器

我遇到的问题是如何获取从 app.component 的下拉菜单中选择的值？

任何帮助是极大的赞赏！！

我已经在组件库中添加了角度材料……嗯，我以为我做到了！

一切都在测试工具中工作（app.module、app.component 等......）

但是，当我导出我的库时，我得到了错误

所以显然我没有在需要添加的地方添加Angular Material。

错误：NullInjectorError：ColumnComponent 没有提供程序！

我创建了一个角度库，然后在库中创建了一个属性指令，主应用程序使用该指令将数据绑定到第 3 方组件的属性。

src/app/client.component.html

这是我在图书馆方面的东西：projects/metadata-lib/src/lib/column-binding-directive.ts

项目/src/lib/metadata-lib.module.ts

我想知道我们是否可以在角度库指令中使用 3rd 方组件？

我有一个包含此网站帖子代码的库： https ://brianflove.com/2018/01/11/angular-window-provider/

在我的库中，我还有一项服务，我想在其中访问窗口对象。但是，在构造函数中添加以下内容不起作用：

尝试使用 cli 构建库时，出现以下错误：

收集的元数据包含将在运行时报告的错误：无法解析类型窗口。

我可以将其更改为使用任何类型而不是 Window，或者添加 @dynamic 作为注释，然后它就可以构建了。有没有更好的方法来做到这一点？

我不确定这是否是正确的方法，因为它还依赖于消费者在其主应用程序模块提供程序数组中设置 WINDOW_PROVIDERS。