Vytvoření knihovny Angular

Dnes vytvoříme novou opakovaně použitelnou knihovnu. Pokud zjistíte, že vytváříte stejnou komponentu ve více než jedné aplikaci (nebo chcete svou komponentu sdílet s dalšími vývojáři), budete knihovnu potřebovat.

Vytvořte projekt

K vygenerování kostry knihovny použijeme angular cli. Pokud nemáte nainstalovaný angular cli, podívejte se do průvodce instalací angular cli.

Následující příkazy vygenerují angular projekt my-project a knihovnu my-lib

ng new my-projectcd my-projectng generate library my-lib

Vytvoří se projects/my-lib ve složce my-project, která obsahuje
my-lib.component.ts a my-lib.service.ts. Angular cli také vytvoří soubor public-api.ts ve složce my-lib. Tento soubor obsahuje následující řádky kódu,

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';

Tento soubor definuje, co je k dispozici uživatelům knihovny (A.K.A veřejné API).

Pokud otevřete my-lib.component.ts, uvidíte následující kód:

import { Component, OnInit } from '@angular/core';@Component({ selector: 'lib-my-lib', template: `<p>my-lib works!</p>`, styles: })export class MyLibComponent implements OnInit { constructor() { } ngOnInit(): void {}}

Tento jednoduchý výstup knihovny my-lib works! a my použijeme selektor,
<lib-my-lib></lib-my-lib> pro konzumaci komponenty.

Nainstalujte knihovnu jako závislost npm.

Chcete-li v angularu používat jakoukoli knihovnu, musíte ji nainstalovat ze správce balíčků, například npm. V tomto příkladu nebudeme naši knihovnu publikovat ve správci balíčků npm. Pokud se chcete dozvědět, jak publikovat angulární knihovnu, přečtěte si angular guide.

Nyní nainstalujeme my-lib jako závislost na npm ze souboru. Otevřete package.json a přidejte "my-lib": "file:projects/my-lib" do bloku závislostí, viz úryvek kódu níže.

 "dependencies": { ... "@angular/router": "~9.1.4", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2", "my-lib": "file:projects/my-lib" }

my-lib je název balíčku, který uvidíte ve složce node_modules, a file:projects/my-lib je vlastní knihovna. Pokud bychom naši knihovnu publikovali v npm, nahradili bychom file:projects/my-lib číslem verze(0.0.1).

Pokud spustíte npm install, zjistíte, že do složky node_modules bylo přidáno my-lib. Nyní můžeme knihovnu importovat a používat v našem projektu. viz úryvek kódu níže:

import {MyLibModule} from 'my-lib';@NgModule({ declarations: , imports: , providers: , bootstrap: ,})export class AppModule { }

Teď, když jsme modul knihovny importovali do našeho projektu, můžeme použít MyLibComponent. Otevřete app.component.html a nahraďte celý kód
<lib-my-lib></lib-my-lib>.

Spustit aplikaci

Spustit aplikaci npm start nebo ng serve. Otevřete prohlížeč a navštivte http://localhost:4200, zobrazí se my-lib works!.

Gratulujeme, úspěšně jste vytvořili knihovnu angular!!!

Kód je k dispozici na githubu

.