在 Angular 中导入本地库时出现构建错误“未找到模块”

Question

我正在尝试为使用 Swagger 自动生成的 api 客户端生成一个库，并在我的 Angular7 应用程序中本地使用它，但我无法使其工作:-(

该库在应用程序中正确生成和导入，VSCode 中没有警告/错误，但是当我在应用程序中运行 ng build 命令时，它会引发以下错误：

ERROR in ./src/app/diary/diary-data.service.ts
Module not found: Error: Can't resolve 'lib-diary-shoot-api-client/lib/api/api' in 'D:\DANI\vscode\dairy-shoot\src\app\diary'
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'lib-diary-shoot-api-client/public_api' in 'D:\DANI\vscode\dairy-shoot\src\app'

我尝试将使用 Swagger 自动生成的 api 客户端复制到我的应用程序中，并且它运行良好，因此我放弃了代码中的任何问题。

我认为在将代码封装到库中或从我的应用程序手动导入代码时，它一定是我做错或遗漏的事情。

我尝试逐步重现它：

1. 使用 angular-cli 创建库

2. 将 api 客户端文件复制到 /lib 文件夹中

3. 在 index.ts 中导出的内部文件：

    export * from './api/api';
    export * from './model/models';
    export * from './variables';
    export * from './configuration';
    export * from './api.module';

4. 用 angular-cli 生成的库

5. 将 /dist/lib 文件复制到应用程序中

6. 在 app ts.config 中添加了库的路径：

    "paths": {
      "lib-diary-shoot-api-client": [
        "./src/lib-diary-shoot-api-client"
      ]
    }

7. 在 app.module 中添加了导入：

    import { ApiModule } from 'lib-diary-shoot-api-client/public_api';

我真的很感激这方面的任何帮助。我已经学习了很多教程，但几乎所有教程都关注 npm 发布而不是本地使用，并且没有提供关于后者的很多细节。

提前致谢！

---

编辑 1：我发现即使使用 ng-cli 生成的示例库，我在尝试从应用程序服务中的库导入服务时也会遇到相同的错误。

如果我在应用程序模块中导入库模块并将库组件标签放在它工作的应用程序模板中，页面将正确呈现，并带有库组件的“它工作”消息。

所以似乎问题只在于服务。

也许出口或注射器有问题？

代码看起来不错，在 VSCode 中没有警告/错误，但是当我运行 ng build 命令时，它抛出与上面相同的错误：

ERROR in ./src/app/diary/diary.module.ts
Module not found: Error: Can't resolve 'libs/diary-shoot-client-lib/public_api' in 'D:\DANI\vscode\dairy-shoot\src\app\diary'
ERROR in ./src/app/diary/diary-data.service.ts
Module not found: Error: Can't resolve 'libs/diary-shoot-client-lib/public_api' in 'D:\DANI\vscode\dairy-shoot\src\app\diary'

我遵循了官方指南：

https://angular.io/guide/creating-libraries

https://github.com/angular/angular-cli/wiki/stories-create-library#using-your-library-inside-your-apps

Angular CLI 的版本：

Angular CLI: 7.0.7
Node: 8.11.0
OS: win32 x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.10.7
@angular-devkit/build-angular      0.10.7
@angular-devkit/build-ng-packagr   0.10.7
@angular-devkit/build-optimizer    0.10.7
@angular-devkit/build-webpack      0.10.7
@angular-devkit/core               7.0.7
@angular-devkit/schematics         7.0.7
@angular/cli                       7.0.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.0.7
@schematics/angular                7.0.7
@schematics/update                 0.10.7
ng-packagr                         4.7.1
rxjs                               6.3.3
typescript                         3.1.6
webpack                            4.19.1

Answer 1

我找到了错误，两个简单的错误：

1. 进口声明：

这不起作用：

import { DiaryShootClientLibService } from 'libs/diary-shoot-client-lib/public_api';

这确实有效：

import { DiaryShootClientLibService } from 'libs/diary-shoot-client-lib';

VSCode 建议我第一个导入，正确的是第二个。

2. 复制文件

/dist/ 文件夹中的所有文件都必须手动复制到您要在其中使用库的应用程序

我缺少 es 和 fesm 文件夹，仅复制 ts 文件是不够的。

有了这两个变化，它就起作用了！:-)