web-dev-qa-db-ja.com

Angular 7ライブラリ-依存関係をメインアプリに追加せずにバンドルする方法

@angular/cliで作成したAngular 7アプリケーションがあり、ng generate libraryを使用してライブラリを追加しました。 devモードなどで正常に動作します。問題ありません。

含まれるライブラリに関連する依存関係を保持したいと思います。メインアプリケーションのpackage.jsonを乱雑にしないでください。したがって、当然、ライブラリフォルダーに対してnpm install --save [xyx]を実行しました。それはうまくいきました。 devモードでも引き続き問題なく動作します。

しかし、ng build --prodを実行しようとすると、突然、ライブラリの一部である依存関係が見つかりません。もちろん、その理由は明らかです。それらは適切にバンドルされていません。私はnpmのbundleDependencies機能を調査しましたが、lib: { embedded: ... }およびwhitelistedNonPeerDependenciesオプションを調べましたng-package.json、しかし、私はそれらのどれもが私が望むことを全くさせることができないようです。

これはメーカーまたはブレークの要件ではありません。絶対に必須の場合は、メインアプリケーションに依存関係をインストールするだけです。しかし、私はそれをとても避けたいです。おそらくそれは不合理な目標だろう、私は確信していない。

どんな助けも大歓迎です。

angularangular7
14
Ciel

あなたがローカルで説明したことをしようとしましたが、問題はありませんでした。ここに私がとったステップがあります。

  1. npm install @angular/cli
  2. node_modules/.bin/ng new installtest
  3. cd installtest
  4. node_modules/.bin/ng generate library libtest
  5. cd projects/libtest
  6. npm install --save numeral
  7. npm install --save-dev @types/numeral

  8. ro.pipe.tsをprojects/libtest/srcに追加しました

    import { Pipe, PipeTransform } from '@angular/core';

import * as numeral from 'numeral';

@Pipe({name: 'decimalUnit'})
export class RoPipe implements PipeTransform {
  constructor() {
    numeral.register('locale', 'ro', {
        delimiters: {
            thousands: '.',
            decimal: ','
        },
        abbreviations: {
            thousand: 'k',
            million: 'm',
            billion: 'b',
            trillion: 't'
        },
        ordinal: function (number) {
            return number === 1 ? 'er' : 'ème';
        },
        currency: {
            symbol: 'RON'
        }
    });

    numeral.locale('ro');
}

  public transform(value: string, numDecimals: number) {
    const b = numeral(value);
    let x = '0,0.';
    for (let i = 0; i < numDecimals; i++) {
        x = x + '0';
    }

    return b.format(x);
  }
}

  9. projects/libtest/src/lib/libtest.module.tsを更新

    import { NgModule } from '@angular/core';
import { LibtestComponent } from './libtest.component';
import { RoPipe } from './ro.pipe';

@NgModule({
  declarations: [LibtestComponent, RoPipe],
  imports: [
  ],
  exports: [LibtestComponent, RoPipe]
})
export class LibtestModule { }

  10. projects/libtest/src/public_api.tsを更新

    export * from './lib/libtest.service';
export * from './lib/libtest.component';
export * from './lib/libtest.module';
export * from './lib/ro.pipe';

  11. tsconfig.jsonを更新します。 "projects/libtest/node_modules/@types"を"typeRoots"配列に追加します

  12. src/app/app.module.tsを更新

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LibtestModule } from 'projects/libtest/src/public_api';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LibtestModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  13. src/app/app.component.htmlを更新

    <label>{{ '12345678' | decimalUnit:2 }}</label>
<br>
<label>{{ '12345678' | decimalUnit:0 }}</label>
<br>
<label>{{ '12345678' | decimalUnit:2 }}</label>
<br>
<label>{{ '12345678' | decimalUnit:2 }}</label>
<br>
<label>{{ '12345678' | decimalUnit:2 }}</label>

その後、npm run startを実行して、devビルドで機能することを確認しました。次に、npm run start -- --prodを実行して、prodビルドで機能することを確認しました。両方とも機能しました。最後にしたことは、npm run buildおよびnpm run build -- --prodを実行し、IISを介してWebサイトをロードすることでした。どちらも機能しました。完全なレポジトリプロジェクトを参照用に GitHub に配置しました。

実際には [〜＃〜] mvce [〜＃〜] を提供していません。そのため、特定のプロジェクトが現在動作していない理由を説明するのは困難です。上記の手順で問題が解決しない場合は、失敗したこと（または、発生している問題を再現できる最小限のプロジェクト）について、詳細に説明してください。

7
peinearydevelopment

私の知る限り、これは不可能です。

「問題」をいくらか解決するために、完全に新しいcliプロジェクトを作成できます。新しいプロジェクトで、ライブラリと他の将来のライブラリを生成します。新しいプロジェクトは、ライブラリのショーケース/ドキュメントになる場合があります。この方法では、すべてのライブラリが同じバージョンの依存関係を使用しますが、メインアプリケーションには含まれません。

0
Robin Dijkhof