web-dev-qa-db-ja.com

Angular6.xライブラリがpublic_api.tsのすべてのメンバーを公開していない

プロジェクトを最新バージョンのAngular（6.0.4）に更新した後、最終的にコードを異なるライブラリに分割したいと思いました。

設定は次のとおりです。

  1. CMS-アプリ
  2. クライアント-アプリ
  3. コア-両方のアプリの共有メンバーを持つライブラリ

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ファイルにはエクスポートされたすべてのメンバーが含まれていません。たとえば、public_api.d.tsの2行目にあるwd-core.module

本当の質問：すべてのメンバーがエクスポートされないという私のライブラリで何が間違っているのですか？

//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

angularng-packagr
6
Linksonder

あなたがする必要があるのは、すでに最初の答えが示唆しているように、ライブラリの外で利用可能である必要があるすべてのものをpublic_api.tsファイルに入れることです。これはこのファイルの目的であり、ライブラリを正しく使用できるようにするために実行する必要があります。また、index.tsファイルの問題は現実のものであるため、変更後も問題が発生する場合は、すべてをpublic_api.tsにエクスポートしてください。次に、「コア/コア」ではなく「コア」からインポートを実行するか、現在のコードのようにさらに長いパスをインポートします。たとえば、dictaat.module.tsでは次のようになります。

import { WdCoreModule, DictaatService } from 'core';

このように機能しない場合は、public_api.tsファイルにエクスポートがないことを意味します。

4
AlesD

Angular 6でライブラリをパッケージ化するために使用されるng-packagrは、「index.ts」という名前の「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ファイルを直接参照するだけで機能することがわかりました。

6
GreyBeardedGeek