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客户端复制到我的应用中，并且效果很好，所以我放弃了代码中的任何问题。

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

我尝试逐步复制它：

使用angular-cli创建库
将api客户端文件复制到/ lib文件夹
在index.ts中导出内部文件：

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

带有angular-cli的生成库
将/ dist / lib文件复制到应用程序中
在应用ts.config中添加了库的路径：

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

在app.module中添加了导入：

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

我真的很感谢您的帮助。我已经看了很多教程，但是几乎所有教程都专注于npm发行，而不是本地使用，并且以后没有提供很多细节。

谢谢！

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

如果我将库模块导入到app模块中，并将库组件标签放入可以工作的应用模板中，则页面将正确显示，并带有库组件的“它可以工作”消息。

所以看来问题仅在于服务。

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

代码看起来不错，在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

我发现了错误，两个简单的错误：

进口声明：

这不起作用：

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

此功能有效：

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

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

复制文件

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

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

通过这两个更改，它可以工作！：-）

Answer 2

在 VsCode 中自动导入时，添加一个 index.ts 文件并从 public_api.ts 或 public-api.ts 导出所有内容不会将路径附加为 ../public_api。

<块引用>

public_api.ts 示例

    /*
     * Public API Surface of @myProject/lib1
     */

      export * from './lib/xxx/abc';
      export * from './lib/xxx/bcd';

<块引用>

index.ts 示例

    /**
     * Helps to get rid of `/public_api` while auto importing from lib.
     */

     export * from './public_api';

在Angular中导入本地库时生成错误“找不到模块”

2 个答案: