将Angular 13模块重构到库中

Question

问题

我无法将我的应用程序的一部分重构为一个有角度的库作为某个应用程序骨架。我尝试了很多东西，每次都有很多不同的错误。

上下文

我在一家大公司工作，我们有很多应用程序需要维护。我们一直在开发一个Angular模块，该模块为我们所做的任何类型的应用程序提供了一切入门内容(标题、导航、模型和服务)。现在该模块已经准备好了，我想将其重构为一个库，并将其部署在我们的artifactory上。

尝试

我读过关于图书馆的文档，但它们过于简单，并不能真正满足我的需求。我也看到了那个帖子，但这似乎不是我想要的。

我尝试使用专用的ng命令生成一个新库，并将我的模块放在/lib目录中。我在public_api.ts中填充了导出并尝试编译，但我真的不知道如何处理依赖性，因为它似乎不起作用：我在构建时没有错误，但似乎无法导入库。

我尝试直接从我的主项目目录中重构为lib。我用所需的文件创建了一个lib文件夹。

/project
/lib
/components
/directives
/interceptors
/models
/services
/node_modules
/theme
/fonts
ng-package.json
package.json
package-lock.json
public_api.ts
my-project.module.ts
my-project-routing.module.ts
tsconfig.lib.json
tsconfig.lib.prod.json
tsconfig.lib.spec.json
my-project.component.html
my-project.component.ts
my-project.component.scss
my-project.component.spec.ts

我尝试在填充public_api文件和tsconfig.lib.*(只是扩展了主项目tsconfig.json)后进行构建，但我不断收到诸如之类的构建错误

Error: my-project.component.html:4:1 - error NG8001: '(component)' is not a known element:
1. If '(component)' is an Angular component, then verify that it is part of this module.
2. If '(component)' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

(component)是组件，但我对所有内容都有这个消息。

我应该将所有内容分解为多个模块吗？还是走错了路？必须有一个更简单的解决方案，我肯定不是第一个尝试这种方法的人。

要实现的主要目标是拥有这个基础应用程序框架，开发人员可以使用简单的npm install进行更新，而不是提取git存储库并解决冲突。

编辑

我今天再次从头开始尝试：

1. 我用ng new my-project --create-application=false创建了一个新的工作空间
2. 我用ng generate library my-lib创建了一个库
3. 我重构了IDE告诉我的内容：在需要的地方添加类型脚本override等
4. 我有一些路由模块，可以激活防护。。。不确定它们是否是问题所在，所以我暂时删除了它们，因为我在IDE中有类型等错误(奇怪的是，我仔细检查了文档)
5. 我导出了public_api.ts中的所有组件/模型/服务和模块
6. 值得注意的是，我有一个抽象组件实现了我的组件扩展的组件接口，还有两个抽象服务(一个或另一个)
7. 我安装了依赖项，并将它们移动到package.json中的peerDependencies(我也试图将它们留在dependencies中)
8. 我运行了ng build my-lib

现在我有一个问题，我不理解

λ ng build my-lib
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'my-lib'
------------------------------------------------------------------------------
× Compiling with Angular sources in Ivy full compilation mode.
Cannot read properties of undefined (reading 'includes')

我也试着切换到完整的Ivy编译模式，但我仍然有这个信息。

Answer 1

我仍然有可能与我的lib有关的问题，但构建通过了，我可以在项目中导入lib，这样就基本上回答了最初的问题。

这有点令人失望，因为我无法确定错误消息的真正原因，但以下是我们所做的：

1. 我用ng new my-project --create-application=false创建了一个新的工作空间
2. 我用ng generate library my-lib创建了一个库
3. 我首先添加了拦截器和指令
4. 我没有复制*.module.ts文件，而是修改了ng命令生成的文件
5. 我添加了服务
6. 我一个接一个地添加了组件

在步骤3-6中的每次添加时，我都运行ng build my-lib进行检查，它最终通过了。

不知道是什么让它坠毁。。。。我在最后一次尝试之前提交了我的文件，然后进行了比较，结果没有什么不同。

所以基本上，如果你遇到类似的问题，你可能想一点一点地做，否则棱角分明的人会不高兴。