多个 Angular 库在生产模式下不起作用
Posted
技术标签:
【中文标题】多个 Angular 库在生产模式下不起作用【英文标题】:Multiple Angular libs do not work in production mode 【发布时间】:2020-09-14 04:10:12 【问题描述】:我创建了一个包含两个 Angular 库的 Angular 项目。你可以找到源代码here。之后,我构建了每个库并通过 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
我做错了什么?任何帮助表示赞赏。
更新
Field 'browser' doesn't contain a valid alias configuration 中的答案似乎提供了解决方案,如何修复使用应用程序中实际损坏的包。据我了解,在我的情况下,我在构建或分发我的包时遇到了一些问题,因此应该解决这个问题。
【问题讨论】:
这个插件的任何文档? 检查了我在下面添加的内容? 该插件处于早期开发阶段,所以很遗憾我暂时没有提供任何文档。但是,用法非常简单——从@agilie/angular-helpies/interceptors
导入拦截器并在提供者之间使用它。
在下面添加了一些内容。看看?
我在这里使用了你的库:- stackblitz.com/edit/angular-aokp5u。没有错误。
【参考方案1】:
错误是由于您的导入中的 /interceptors 造成的。
你也没有 public-api.ts 在拦截器文件夹中
在此处参考您的 public-api.ts 应该在哪里以及如何正确导出您的类。像@angular/common/http 已经导出。
https://github.com/angular/angular/tree/master/packages/common/http
【讨论】:
模块中无需添加拦截器。 好的,我试过了,但这没有帮助。既没有像以前那样使用,也没有将整个InterceptorsModule
包含到我的应用程序中。错误保持不变。实际上拦截器不需要成为模块的一部分,所以这个建议似乎是错误的方式。
Stackblitz 不在生产模式下编译代码。我在开发模式下也没有任何问题,只有在生产中。关于你的链接 - 让我检查一下。我读过很多类似的
您使用的是什么角度版本?
8.2.14(库和消费项目)【参考方案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 也有类似的命名
【讨论】:
以上是关于多个 Angular 库在生产模式下不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Angular Js Datatable:在响应式插件中,ng-click 在缩放(折叠)模式下不起作用
Reactable在生产模式下不起作用,但在开发模式下可以正常工作