DevUI で独自の Angular コンポーネント ライブラリを構築する方法

ng 新しい <my-project>

ng ライブラリを生成 <my-lib> --prefix <my-prefix>

"my-lib": {
  "プロジェクトタイプ": "ライブラリ",
  "ルート": "プロジェクト/my-lib",
  "ソースルート": "プロジェクト/my-lib/src",
  「プレフィックス」:「dev」、
  "建築家"： {
    "建てる"： {
      "ビルダー": "@angular-devkit/build-ng-packagr:build",
      「オプション」: {
          "tsConfig": "プロジェクト/my-lib/tsconfig.lib.json",
          "プロジェクト": "projects/my-lib/ng-package.json"
      },
  「構成」: {
    "生産"： {
      "tsConfig": "プロジェクト/my-lib/tsconfig.lib.prod.json"
    }
  }
},
...

// my-lib.module.ts


'@angular/core' から NgModule をインポートします。
'@angular/common' から CommonModule をインポートします。
import { AlertModule } from 'my-lib/alert'; // ここではオンデマンドインポート方式に従ってインポートします。my-lib はリリースライブラリ名 @NgModule({ に対応します。
  インポート: [ CommonModule ],
  エクスポート: [AlertModule],
  プロバイダー: [],
})
クラス MyLibModule をエクスポートします {}


// インデックス.ts
'./my-lib.module' から * をエクスポートします。


// 角度付きJSON
"プロジェクトタイプ": "ライブラリ",
"ルート": "プロジェクト/my-lib",
"sourceRoot": "projects/my-lib", // ここでのパスは新しいディレクトリを指します "prefix": "devui"

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../publish",
  "ライブラリ": {
    "エントリファイル": "./index.ts"
  },
  "whitelistedNonPeerDependencies": ["lodash-es"]
}

{
  "名前": "my-lib",
  "バージョン": "0.0.1",
  「ピア依存関係」: {
    "@angular/common": "^9.1.6",
    "@angular/core": "^9.1.6",
    "tslib": "^1.10.0"
  }
}

// パッケージ.json
{
  "ngパッケージ": {
    "ライブラリ": {
      "エントリファイル": "public-api.ts"
    }
  }
}


// パブリック API.ts
/*
* パブリックAPIアラートの表面
*/
'./alert.component' から * をエクスポートします。
'./alert.module' から * をエクスポートします。

'@angular/core' から Component、Input } をインポートします。
// アラートエクスポートのオプションの種類を定義します。 type AlertType = 'success' | 'danger' | 'warning' | 'info';


@成分（{
  セレクタ: 'dev-alert'、
  テンプレート URL: './alert.component.html',
  スタイル URL: ['./alert.component.scss'],
})
AlertComponentクラスをエクスポートする{
  // アラートタイプ@Input() type: AlertType = 'info';
  // ユーザー定義アイコンをサポートするためにアイコンを表示するかどうか @Input() showIcon = true;
  // @Input() を閉じることは可能ですか? closeable = false;
  // コールバックを閉じる @Output() closeEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
  非表示 = false;
  コンストラクタ() {}


  近い（）{
    this.closeEvent.emit(true);
    これを非表示にするには、次の手順を実行します。
  }
}

<div class="dev-alert {{ type }} " *ngIf="!hide">
  <button type="button" class="dev-close" (click)="close()" *ngIf="closeable"></button>
  <span class="dev-alert-icon icon-{{ type }}" *ngIf="showIcon"></span>
  <コンテンツ></コンテンツ>
</div>

「パス」: {
  "my-lib": [
    「プロジェクト/my-lib/index.ts」
  ]、
  "my-lib/*": [
    「プロジェクト/my-lib/*」
  ]、
}

'my-lib/alert' から AlertModule をインポートします。
// 'my-lib' から { MyLibModule } をインポートします。


@Ngモジュール({
  宣言: [
    アプリコンポーネント
  ]、
  輸入: [
    ブラウザモジュール、
    アプリルーティングモジュール、
    // マイライブラリモジュール
    アラートモジュール
  ]、
  プロバイダー: [],
  ブートストラップ: [AppComponent]
})
クラス AppModule をエクスポートします { }

<セクション>
  <dev-alert>私はデフォルトのアラートタイプです</dev-alert>
</セクション>

// 角度付きJSON
"my-lib": {
  ...
  "テスト"： {
    "ビルダー": "@angular-devkit/build-angular:karma",
    「オプション」: {
      "main": "projects/my-lib/test.ts", // これは調整されたファイル パスを指します "tsConfig": "projects/my-lib/tsconfig.spec.json",
      "karmaConfig": "projects/my-lib/karma.conf.js"
    }
  },
}


//my-libディレクトリのtsconfig.spec.json  


「ファイル」: [
  "test.ts" // 現在のディレクトリ内のテストエントリファイルを指します]

'@angular/core/testing' から { async、ComponentFixture、TestBed } をインポートします。


'@angular/core' から Component をインポートします。
'./alert.module' から AlertModule をインポートします。
'./alert.component' から { AlertComponent } をインポートします。
'@angular/platform-b​​rowser' から { By } をインポートします。


@成分（{
  テンプレート: `
    <dev-alert [type]="type" [showIcon]= "showIcon"[closeable]="closeable" (closeEvent)="handleClose($event)">
    <span>私はアラートコンポーネントです</span>
    </開発アラート>
  `
})
クラス TestAlertComponent {
  タイプ = '情報';
  アイコンを表示 = false;
  閉じることができる = false;
  クリック数 = 0;
  ハンドルクローズ(値) {
    this.clickCount++;
  }
}


記述('AlertComponent', () => {
  コンポーネントを作成します: TestAlertComponent;
  フィクスチャを ComponentFixture<TestAlertComponent> にします。
  alertElement: HTMLElement を設定します。


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      インポート: [AlertModule],
      宣言: [ TestAlertComponent ]
    })
    .compileComponents();
  }));


  それぞれの前に(() => {
    フィクスチャ = TestBed.createComponent(TestAlertComponent);
    コンポーネント = fixture.componentInstance;
    alertElement = fixture.debugElement.query(By.directive(AlertComponent)).nativeElement;
    フィクスチャ.detectChanges();
  });


  記述('アラートインスタンステスト', () => {
    it('作成すべき', () => {
      コンポーネントが真実であることを想定します。
    });
  });


  describe('アラートタイプテスト', () => {
    it('アラートには情報タイプが必要です', () => {
      期待(alertElement.querySelector('.info'))。nullではありません。
    });


    it('アラートには成功タイプが必要です', () => {
      // 型の変更が正しいかどうかを判断するために型を変更します。component.type = 'success';
      フィクスチャ.detectChanges();
      期待(alertElement.querySelector('.success'))。not.toBe(null);
    });
  }

ng ビルド my-lib --prod