问题标签 [angular-library]

我在 v6 上有一个 Angular 应用程序。我将它构建为普通应用程序，现在我发现我需要将其导入另一个应用程序，有没有办法让我真正将我的应用程序转换为库？

Tnx 在高级。

In latest versions of Angular cli, we can use ng g library lib-name command to create library. As mentioned in the Angular docs :

And:

So, we can serve library. But when I serve I get the following errors:

我有一个导入 Angular 库的 Angular 6 项目。

我成功地从库中导入组件，现在我想在库中拥有 AuthGuard 服务，以便在所有项目中共享，但我做不到。

我在lib的public_api中导出了AuthGuard并在模块中提供，但我不知道如何在项目中访问。

当我尝试导入时：

我有错误：

未找到模块：错误：无法解析 'c:\workspace\my-project\src\app\portal' 中的 'my-lib/lib/security/auth.guard'

根据我的业务需求，在 Angular 7 应用程序中，我需要添加如下所示的日历（图片）。日历应该是高度可定制的以满足业务需求。

看日历：

预定事件、搜索、按时触发电子邮件、任务、工作流等。

任何人帮助我一些开源库或正确的方法来推动这一点？

更新 3

我按照@Ingo 的建议使我的库组件实现了CVA，但我发现由于我的组件包装了@ng-select/ng-select，一些必要的功能破坏了ng-select 的基本功能。也就是说，当从项目列表中选择一个值时，它会填充该值，但它会保持隐藏状态。删除所有必需的 CVA 方法使库组件成为一个工作库组件，但在调用表单中显示所选值的挑战仍然存在（仍在努力）。

或者，添加一个事件发射器并定义一个 @Output 似乎遇到了类似的情况，即试图拦截 ng-select 中的更改事件会导致破坏它。很可能 ng-select 不适合嵌入到库组件中。

更新 2

从大量来源来看，使用 @Output 和 EventEmitter 似乎是对此的正确答案。如果没有其他人愿意提供答案，我会在我完成所有工作并发布后写一个。

原始问题

我决定开始尝试 Angular 6 库功能，但我已经升级到 Angular 7 CLI。我认为这并不重要，但我对 Angular 开发还很熟悉。

我想制作成库的组件是一个基于 ng-select 的表单控件。它通过父输入从父表单组件接收 formGroup。

.ts 文件的父级为 @Input()

在父表单组件中，我像这样安装控件

在父表单 .ts 文件中，表单的类型为 FormGroup，并在调用 @ngOnInit 时构造。在一个自包含的项目中，这很好用。

不过，我最大的问题是，抽象这种关系的正确方法是什么？

我应该使用原理图而不是库吗？或者是否有适当的方法来公开此输入以便最初构建？我可以将它放入测试工具中，并像自包含应用程序一样提供输入，但在构建时，它会产生一个你可能都非常熟悉的错误：

无法绑定到“formGroup”，因为它不是“div”的已知属性。

我遵循了几个不同的教程，它们似乎都遵循相同的一般结构。

https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5

https://angular.io/guide/creating-libraries ...仅举两个例子，我怀疑答案就在这里，但我对这个主题的理解仍处于起步阶段。

所有帮助和指导表示赞赏。

更新

我在上面提供的第二个链接似乎提供了输入应该是无状态的观点......

为了使您的解决方案可重用，您需要对其进行调整，使其不依赖于特定于应用程序的代码。以下是将应用程序功能迁移到库时需要考虑的一些事项。

组件和管道等声明应设计为无状态的，这意味着它们不依赖或更改外部变量。

（强调补充）。我一直在做的是将此输入作为表单的一部分，然后在提交时从表单中获取值。听起来我应该反转这个，以便库组件发出一个事件，就像在这个答案中一样。如果这是最好的方法，问题仍然存在。通过事件处理库组件的值似乎更合乎逻辑。

我需要关于我无法解决的问题的帮助。我正在研究 Angular 7 库，以便为我的应用程序添加模块化，但是在库中定义的模块路由在将其安装到应用程序中时似乎不起作用。

我已经在 github 上创建了项目来重现问题：
Library test foo-lib
External Application foo-tester

在每个自述文件中，我都描述了如何重现此问题。

我创建了一个示例库（foo-lib），其路由模块定义了子路由，然后我在同一个工作区的一个简单应用程序中构建并测试了它。一切正常，库路由已正确添加到测试应用程序。在下一步中，我导出了构建的库，并通过 npm link 命令将其包含在另一个工作区的另一个应用程序示例中，并在此应用程序上运行了 ng serve 命令。使用此配置，如果尝试实现库路由路径，我会收到错误消息，就好像它们没有添加到主路由模块一样。

Foo-lib-routing.module.ts

Foo-lib.module.ts

app.module.ts

路由.module.ts

尝试导航到库路径时控制台中显示错误

我正在尝试在可重用库中转换 Angular 6 应用程序；这是我所做的：

• 创建了一个新的 Angular 工作区
• 在该工作区中创建了一个新的 Angular 库项目
• 从库中的旧应用程序复制工件并调整导入语句

当我尝试使用“ng build --project=..”编译项目时，我收到很多这样的错误：“属性 X 是私有的，只能在类 Y 中访问”

我理解错误，我会更正它们，但我的问题是：如果我尝试使用 aot 构建旧应用程序，我不会收到此错误..为什么？

谢谢！

我有一个名为 LibA 的 Angular 7 库（使用 创建ng g library ...），在那里我安装了一个名为 DependencideA 的 NPM 包。我只在 NgModuleA 及其组件中导入了来自 DependencideA 的对象。

现在，当我在 Angular 应用程序中使用 NPM 包 LibA 时，出现以下错误：error TS2307: Cannot find module 'DependencideA'.即使我没有从 LibA 导入 NgModuleA（但我已经从 LibA 导入了 NgModuleB，它不使用 DependencideA！）。

为什么我需要这个 DependencideA，即使我不使用那里的对象？有没有办法在不拆分 LibA 的情况下避免这种情况？

编辑：

这里是一个例子：https ://github.com/admir86/LibSample

我使用verdaccio作为 npm 代理来发布 LibA 并将其安装在 LibAConsumer 项目中。

我想创建一个可以与不同角度项目共享的角度库。

该库将加载到私有 GitLab 存储库中，我想使用此命令安装它

任何人都可以帮助我做到这一点？谢谢

我想创建一个 Angular 库，我需要在我的主干项目中使用它。

我已经尝试过使用 Angular Web 组件的东西并且它有效。我使用了@angular/elements。现在我需要同样的东西来使用 Angular 库。