typescript - 多个 Angular 库在生产模式下无法工作
我创建了一个 Angular 项目,该项目由两个 Angular 库组成。你可以在这里找到源代码。之后,我构建了每个库,并通过 npm 分享生成的 dist 文件夹。这里是该包:https://www.npmjs.com/package/@agilie/angular-helpies。
在那之后,我尝试使用这个库中的拦截器,并像这样导入它
import {DuplicateRequestFilter} from '@agilie/angular-helpies/interceptors';
在开发模式下一切运行正常,但当我尝试在生产模式下构建项目时,我会遇到一个错误
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'interceptors' in '/Users/sergey/libs/test-helpies/src/app'
resolve 'interceptors' in '/Users/sergey/libs/test-helpies/src/app'
Parsed request is a module
using description file: /Users/sergey/libs/test-helpies/package.json (relative path: ./src/app)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
looking for modules in /Users/sergey/libs/test-helpies/
using description file: /Users/sergey/libs/test-helpies/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/sergey/libs/test-helpies/package.json (relative path: ./interceptors)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/sergey/libs/test-helpies/interceptors doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/sergey/libs/test-helpies/interceptors.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/Users/sergey/libs/test-helpies/interceptors.tsx doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/sergey/libs/test-helpies/interceptors.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/sergey/libs/test-helpies/interceptors.js doesn't exist
as directory
/Users/sergey/libs/test-helpies/interceptors doesn't exist
/Users/sergey/libs/test-helpies/src/app/node_modules doesn't exist or is not a directory
/Users/sergey/libs/test-helpies/src/node_modules doesn't exist or is not a directory
/Users/sergey/libs/node_modules doesn't exist or is not a directory
/Users/sergey/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /Users/sergey/libs/test-helpies/node_modules
using description file: /Users/sergey/libs/test-helpies/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/sergey/libs/test-helpies/package.json (relative path: ./node_modules/interceptors)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/sergey/libs/test-helpies/node_modules/interceptors doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/sergey/libs/test-helpies/node_modules/interceptors.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/Users/sergey/libs/test-helpies/node_modules/interceptors.tsx doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/sergey/libs/test-helpies/node_modules/interceptors.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/sergey/libs/test-helpies/node_modules/interceptors.js doesn't exist
as directory
/Users/sergey/libs/test-helpies/node_modules/interceptors doesn't exist
[/Users/sergey/libs/test-helpies/interceptors]
[/Users/sergey/libs/test-helpies/interceptors.ts]
[/Users/sergey/libs/test-helpies/interceptors.tsx]
[/Users/sergey/libs/test-helpies/interceptors.mjs]
[/Users/sergey/libs/test-helpies/interceptors.js]
[/Users/sergey/libs/test-helpies/src/app/node_modules]
[/Users/sergey/libs/test-helpies/src/node_modules]
[/Users/sergey/libs/node_modules]
[/Users/sergey/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/sergey/libs/test-helpies/node_modules/interceptors]
[/Users/sergey/libs/test-helpies/node_modules/interceptors.ts]
[/Users/sergey/libs/test-helpies/node_modules/interceptors.tsx]
[/Users/sergey/libs/test-helpies/node_modules/interceptors.mjs]
[/Users/sergey/libs/test-helpies/node_modules/interceptors.js]
@ ./src/app/app.module.ngfactory.js 14:0-35 15:1945-1970
@ ./src/main.ts
@ multi ./src/main.ts
你可以使用这个演示项目重现该错误:https://github.com/SergeyMell/test-helpies
我做错了什么?任何帮助都感激。
更新
在字段 'browser' 中的答案不包含有效的别名配置,似乎提供了如何在使用应用中修复实际损坏包的解决方案。在我的情况下,据我理解,我在构建或分发我的包时存在一些问题,所以这应该被修复。
答案#1
错误是由于你导入中的 /interceptors 引起的。
此外,你在 interceptors 文件夹中没有 public-api.ts
这里有一个参考,说明你的 public-api.ts 应该放在哪里以及如何正确导出你的类。就像 @angular/common/http 那样导出的。
https://github.com/angular/angular/tree/master/packages/common/http
答案#2
最终,我成功解决了这个问题。问题出在包的命名上。只要我的根包命名为 @agilie/angular-helpies,子包就应该命名为 @agilie/angular-helpies/interceptors 和 @agilie/angular-helpies/decorators,而不能简单命名为 interceptors 或 decorators。
这看起来很奇怪,因为如果我尝试用这样的名称生成库,我会收到一个错误 Project name "@agilie/angular-helpies/<some name here>" is invalid。另外,当我手动重命名包时,我会收到一个警告 String violates the pattern。然而,它还是可以运行。
可能这可以通过其他方式解决(npm 链接或其他方法),但我找到了解决方案。实际上,如果你查看 https://github.com/angular/angular/blob/master/packages/common/http/package.json ,Angular 也有类似的命名方式。