Angular6.x 库不公开 public_api.ts 中的所有成员
Angular6.x Library not exposing all members in public_api.ts
将我的项目更新到最新版本的 Angular (6.0.4) 之后,我想最终将我的代码分离到不同的库中。
设置如下:
- CMS - 应用程序
- 客户端 - 应用程序
- 核心 - 两个应用程序共享成员的库
我创建了 3 个空项目,并开始将所有组件和服务移动到正确的文件夹中。最终完成所有这些编辑并删除 TS 错误后,我的构建仍然失败。我的 CMS 应用程序似乎找不到我的库中定义的任何模块、组件或服务。我的图书馆建设正确,似乎包含所有这些元素。
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '**\Webdictaat.Client\dist\core\core' in '**\Webdictaat.Client\projects\cms\src\app'
我的库包含一个 public_api.ts,它看起来工作正常,但生成的 core.ts 文件不包含所有导出的成员。例如 wd-core.module 位于 public_api.d.ts
的第二行
真正的问题:我在我的库中做错了什么,不是所有的成员都被导出了?
//dist/core/public_api.d.ts
export * from './lib/avatar/avatar.component';
export * from './lib/wd-core.module';
export * from './lib/modal-component/modal-component.component';
export * from './lib/game-elements/game-elements.module';
export * from './lib/core/html-outlet.directive';
export * from './lib/services';
export * from './lib/models';
//dist/core/core.d.ts
//No wd-core.module :(
/**
* Generated bundle index. Do not edit.
*/
export * from './public_api';
export { BaseModalService as ɵg } from './lib/core/basemodal.service';
export { GroupByPipe as ɵv } from './lib/core/group-by.pipe';
export { ArraySortPipe as ɵw } from './lib/core/order-by.pipe';
export { ProcessTokenComponent as ɵx } from './lib/core/process-token.component';
export { DirtyGuard as ɵk } from './lib/core/security/dirty.guard';
export { wdApi as ɵb } from './lib/core/wd.service';
export { WdFilterPipe as ɵu } from './lib/core/wdfilter.pipe';
export { DialogComponent as ɵs } from './lib/dialog/dialog.component';
export { ModalComponentComponent as ɵy } from './lib/modal-component/modal-component.component';
export { NavMenuService as ɵm } from './lib/nav-menu/nav-menu.service';
export { AccountService as ɵa } from './lib/services/account.service';
export { AchievementService as ɵi } from './lib/services/achievement.service';
export { AssignmentService as ɵn } from './lib/services/assignment.service';
export { ConfigService as ɵd } from './lib/services/config.service';
export { DialogService as ɵe } from './lib/services/dialog.service';
export { DictaatService as ɵc } from './lib/services/dictaat.service';
export { GoogleAnalyticsEventsService as ɵq } from './lib/services/google-analytics.service';
export { ImageService as ɵh } from './lib/services/images.service';
export { ParticipantService as ɵo } from './lib/services/participantService';
export { PollService as ɵr } from './lib/services/poll.service';
export { QuizService as ɵf } from './lib/services/quiz.service';
export { RatingService as ɵj } from './lib/services/rating.service';
export { StylingService as ɵp } from './lib/services/styling.service';
export { VideoService as ɵl } from './lib/services/video.service';
export { SpinnerComponent as ɵt } from './lib/spinner/spinner.component';
完整 Github 项目:
https://github.com/Webdictaat/Webdictaat.Client/tree/update6
图书馆项目
https://github.com/Webdictaat/Webdictaat.Client/tree/update6/projects/core
CMS 应用项目
https://github.com/Webdictaat/Webdictaat.Client/tree/update6/projects/cms
我发现(通过跟踪和错误)Angular 6 用来打包您的库的 ng-packagr 无法正确处理通过名为 [=28] 的 "barrel" 文件公开的导入=] 由其父目录名称引用。
因此,在您的 public_api.ts 文件中,例如,
export * from './lib/services';
您需要将其更改为
export * from './lib/services/index';
这很烦人,我希望当 Angular CLI 合并它时,它会得到修复,或者至少有详细的记录,但可惜,似乎没有。
实际上我不清楚这是 ng-packagr 问题还是 Angular 问题(可能与 ngc 有关),但是 https://github.com/dherges/ng-packagr/issues/195 处有一个问题描述了正在发生的事情,并且链接到一些 Angular 问题,以及 Angular 的拉取请求以部分修复它。
换句话说,它很复杂。
与此同时,我发现只要直接引用 index.ts 文件就可以了。
您需要做的是像第一个答案所暗示的那样,将所有需要在库外可用的内容放入 public_api.ts
文件中。这是此文件的目的,需要完成此操作,以便您可以正确使用该库。 index.ts 文件的问题也是真实存在的,因此如果在更改后您仍然遇到问题,只需导出 public_api.ts
中的所有文件即可。
然后你从 'core' 而不是 'core/core' 甚至更长的路径导入,就像你现在在代码中所做的那样。例如,在您的 dictaat.module.ts
中,它应该如下所示:
import { WdCoreModule, DictaatService } from 'core';
如果它不能像这样工作,则意味着 public_api.ts
文件中缺少导出。
将我的项目更新到最新版本的 Angular (6.0.4) 之后,我想最终将我的代码分离到不同的库中。
设置如下:
- CMS - 应用程序
- 客户端 - 应用程序
- 核心 - 两个应用程序共享成员的库
我创建了 3 个空项目,并开始将所有组件和服务移动到正确的文件夹中。最终完成所有这些编辑并删除 TS 错误后,我的构建仍然失败。我的 CMS 应用程序似乎找不到我的库中定义的任何模块、组件或服务。我的图书馆建设正确,似乎包含所有这些元素。
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '**\Webdictaat.Client\dist\core\core' in '**\Webdictaat.Client\projects\cms\src\app'
我的库包含一个 public_api.ts,它看起来工作正常,但生成的 core.ts 文件不包含所有导出的成员。例如 wd-core.module 位于 public_api.d.ts
的第二行真正的问题:我在我的库中做错了什么,不是所有的成员都被导出了?
//dist/core/public_api.d.ts
export * from './lib/avatar/avatar.component';
export * from './lib/wd-core.module';
export * from './lib/modal-component/modal-component.component';
export * from './lib/game-elements/game-elements.module';
export * from './lib/core/html-outlet.directive';
export * from './lib/services';
export * from './lib/models';
//dist/core/core.d.ts
//No wd-core.module :(
/**
* Generated bundle index. Do not edit.
*/
export * from './public_api';
export { BaseModalService as ɵg } from './lib/core/basemodal.service';
export { GroupByPipe as ɵv } from './lib/core/group-by.pipe';
export { ArraySortPipe as ɵw } from './lib/core/order-by.pipe';
export { ProcessTokenComponent as ɵx } from './lib/core/process-token.component';
export { DirtyGuard as ɵk } from './lib/core/security/dirty.guard';
export { wdApi as ɵb } from './lib/core/wd.service';
export { WdFilterPipe as ɵu } from './lib/core/wdfilter.pipe';
export { DialogComponent as ɵs } from './lib/dialog/dialog.component';
export { ModalComponentComponent as ɵy } from './lib/modal-component/modal-component.component';
export { NavMenuService as ɵm } from './lib/nav-menu/nav-menu.service';
export { AccountService as ɵa } from './lib/services/account.service';
export { AchievementService as ɵi } from './lib/services/achievement.service';
export { AssignmentService as ɵn } from './lib/services/assignment.service';
export { ConfigService as ɵd } from './lib/services/config.service';
export { DialogService as ɵe } from './lib/services/dialog.service';
export { DictaatService as ɵc } from './lib/services/dictaat.service';
export { GoogleAnalyticsEventsService as ɵq } from './lib/services/google-analytics.service';
export { ImageService as ɵh } from './lib/services/images.service';
export { ParticipantService as ɵo } from './lib/services/participantService';
export { PollService as ɵr } from './lib/services/poll.service';
export { QuizService as ɵf } from './lib/services/quiz.service';
export { RatingService as ɵj } from './lib/services/rating.service';
export { StylingService as ɵp } from './lib/services/styling.service';
export { VideoService as ɵl } from './lib/services/video.service';
export { SpinnerComponent as ɵt } from './lib/spinner/spinner.component';
完整 Github 项目:
https://github.com/Webdictaat/Webdictaat.Client/tree/update6
图书馆项目
https://github.com/Webdictaat/Webdictaat.Client/tree/update6/projects/core
CMS 应用项目
https://github.com/Webdictaat/Webdictaat.Client/tree/update6/projects/cms
我发现(通过跟踪和错误)Angular 6 用来打包您的库的 ng-packagr 无法正确处理通过名为 [=28] 的 "barrel" 文件公开的导入=] 由其父目录名称引用。
因此,在您的 public_api.ts 文件中,例如,
export * from './lib/services';
您需要将其更改为
export * from './lib/services/index';
这很烦人,我希望当 Angular CLI 合并它时,它会得到修复,或者至少有详细的记录,但可惜,似乎没有。
实际上我不清楚这是 ng-packagr 问题还是 Angular 问题(可能与 ngc 有关),但是 https://github.com/dherges/ng-packagr/issues/195 处有一个问题描述了正在发生的事情,并且链接到一些 Angular 问题,以及 Angular 的拉取请求以部分修复它。
换句话说,它很复杂。
与此同时,我发现只要直接引用 index.ts 文件就可以了。
您需要做的是像第一个答案所暗示的那样,将所有需要在库外可用的内容放入 public_api.ts
文件中。这是此文件的目的,需要完成此操作,以便您可以正确使用该库。 index.ts 文件的问题也是真实存在的,因此如果在更改后您仍然遇到问题,只需导出 public_api.ts
中的所有文件即可。
然后你从 'core' 而不是 'core/core' 甚至更长的路径导入,就像你现在在代码中所做的那样。例如,在您的 dictaat.module.ts
中,它应该如下所示:
import { WdCoreModule, DictaatService } from 'core';
如果它不能像这样工作,则意味着 public_api.ts
文件中缺少导出。