web-dev-qa-db-ja.com

angle-cliライブラリはセカンダリエントリポイントを作成します

angular npmパッケージにセカンダリエントリポイントと呼ばれるものを作成しようとしています。次の2つのエントリポイントが必要です

@scope/data-service
@scope/data-service/models

Angle-cliを使用して基本パッケージを生成すると、次の構造が生成されます

scope
└───data-service
    │   karma.conf.js
    │   ng-package.json
    │   ng-package.prod.json
    │   package.json
    │   tsconfig.lib.json
    │   tsconfig.spec.json
    │   tslint.json
    │
    └───src
        │   public_api.ts
        │   test.ts
        │
        └───lib
                data-service.component.spec.ts
                data-service.component.ts
                data-service.module.ts
                data-service.service.spec.ts
                data-service.service.ts

Ng-packagrに基づいて documentation モデルと呼ばれるデータサービスの下にフォルダーを追加し、そのフォルダーに2番目のpackage.jsonを追加しますが、ng-packagrは角度とは少し異なる構造を使用しているようです-cli。理想的には、 https://github.com/angular/angular/tree/master/packages/common に似た構造をモデル化しようとしていますが、公開されているのが@scope/data-serviceである限り@scope/data-service/modelsよろしくお願いします。

Ng-packagerの推奨事項に似た構造を作成しようとすると、

error TS6059: File 'C:/projects/data-service-app/projects/scope/data-service/models/src/index.ts' is not under 'rootDir' 'C:\projects\data-service-app\projects\scope\data-service\src'. 'rootDir' is expected to contain all source files.

モデルディレクトリをdata-service\srcディレクトリに移動すると、エントリポイントは次のようになります。

@scope/data-service
@scope/data-service/src/models

セカンダリエントリポイントのsrcを削除するにはどうすればよいですか？

Angle-cliを使用するときにセカンダリエントリポイントを持つライブラリを作成するための正しいアプローチは何ですか？

angularangular-cliangular-libraryng-packagr
9
JoAMoS

セカンダリエントリポイントのフォルダレイアウトの例

package.jsonファイルを作成し、セカンダリエントリポイントを作成する場所に配置するだけです。これを行う1つの方法は、メインのエントリポイントに加えてテストエントリポイントを持つ次の例のフォルダ構造を模倣することです。

my_package
├── src
|   ├── public_api.ts
|   └── *.ts
├── ng-package.json
├── package.json
└── testing
    ├── src
    |   ├── public_api.ts
    |   └── *.ts
    └── package.json

my_package/testing/package.jsonの内容は、次のように単純にすることができます。

{
  "ngPackage": {}
}

いいえ、それはタイプミスではありません。名前は必要ありません。バージョンは必要ありません。それはすべてng-packagrによって処理されます！ビルドされると、プライマリエントリポイントはimport {..} from '@my/library'でインポートされ、セカンダリエントリポイントはimport {..} from '@my/library/testing'でインポートされます。

ソース- https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md

0
progm

返信いただきありがとうございます。これが私が最終的に得た解決策です、それはすべてindex.tsとpublic_api.tsファイルを正しく設定することを中心に展開しました

\---projects
    \---scope
        \---ngx-package
            |   karma.conf.js
            |   ng-package.json
            |   ng-package.prod.json
            |   package.json
            |   tsconfig.lib.json
            |   tsconfig.spec.json
            |   tslint.json
            |
            \---src
                |   public_api.ts
                |   test.ts
                |
                +---lib
                |       package-client-config.ts
                |       package-client.spec.ts
                |       package-client.ts
                |       package.module.ts
                |
                \---models
                    |   index.ts  (1)
                    |   package.json (2)
                    |   public_api.ts  (3)
                    |
                    \---src
                        |   public_api.ts  (4)
                        |
                        \---lib
                            |   model-a.ts
                            |   model-b.ts
                            |
                            \---hateoas
                                    hateoas.ts

さて、上のツリーでは、番号が入ったペアレンが下のファイルに対応していることに注意してください。

1）/projects/scope/ngx-package/src/models/index.ts

// export what ./public_api exports so we can reference models like
// import { modelA } from './models'
export * from './public_api';

2）/projects/scope/ngx-package/src/models/package.json

{
  "ngPackage": {}
}

3）/projects/scope/ngx-package/src/models/public_api.ts

export * from './src/public_api';

4）/projects/scope/ngx-package/src/models/src/public_api.ts

export * from './lib/model-a';
export * from './lib/model-b';
export * from './lib/hateoas/hateoas';

この設定では、エクスポートのリストを1か所に保持するだけで済みます。私はうまくいかなかった他の多くのバリエーションを試しましたが、これは問題なく機能しているように見えました。

5
JoAMoS

これはng-packagrでは簡単な作業ではないのではないかと思います。

パッケージ化しようとするすべての「プロジェクト」について、ng-packagrはすべてのセカンダリパッケージを自動的に検出します。

ng-packagr ignorestsconfig.lib.jsonセカンダリパッケージのファイル。プライマリパッケージで提供されるtsconfigファイルを使用します。

次に、コンパイルする前に、プライマリのtsconfigを使用して、プライマリとすべてのセカンダリのTSプログラムをロードします。

これはこの方法で行われるため、パッケージャーはコードを解析して依存関係ツリーを作成し、最初にレンダリングするパッケージ、2番目にレンダリングするパッケージなどを指示します... [〜＃〜] yes [〜＃〜]、それはまた、ng-packagrがセカンダリパッケージが常にプライマリに依存しているとは想定していないことを意味します。それは逆であり、有効です...

これで、この時点まではすべて問題なく、エラーなどはありません...すべてのパッケージに対してTSプログラムが作成されますが、何も出力しないため、すべて問題ありません。

表示されるエラーは、コンパイラがファイルを発行してスローするコンパイルフェーズで発生します。これは、ng-packagrがログを記録するときです"ngcを介したTypeScriptソースのコンパイル"

この時点で、TypeScriptはルート外のファイルへの参照に満足していません。

1つの解決策は、pathsのtsconfigプロパティを更新して、ビルドされたすべてのパッケージの出力ディレクトリを指すようにすることです。したがって、パッケージAがコンパイルされたばかりの場合、TSソースとは見なされない出力ライブラリを指すpathsレコードを変更/作成します...したがって、エラーは発生しません。

これは動作します、私はそれをテストしました、しかし悲しいことにそれはng-packagrソースコードで、または私がそれをしたように、カスタムangular devkitbuilder.。

これを使用すると、各コンパイルが終了した直後にpathsを置き換えることができるため、次のコンパイルでは、ソースコードではなく、ビルドされた出力が参照されます。

Ng-packagrは依存関係グラフに基づいてパッケージを構築するため、これが機能すると想定しても問題ありません。

4
Shlomi Assaf