Opret Angular-bibliotek

Af

I dag skal vi oprette et nyt genanvendeligt bibliotek. Hvis du finder dig selv ved at skabe den samme komponent i mere end én app (eller hvis du vil dele din komponent med andre udviklere), har du brug for et bibliotek.

Opret projektet

Vi vil bruge angular cli til at generere bibliotekets skelet. Hvis du ikke har angular cli installeret, skal du se angular cli-installationsvejledning.

De følgende kommandoer genererer angular-projekt my-project og bibliotek my-lib

ng new my-projectcd my-projectng generate library my-lib
Enter fullscreen mode Exit fullscreen mode

Dette opretter projects/my-lib i my-project-mappen, som indeholder
my-lib.component.ts og my-lib.service.ts. Angular cli har også oprettet public-api.ts fil i my-lib mappe. Denne fil indeholder følgende kodelinjer,

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';
Enter fullscreen mode Exit fullscreen mode

Denne fil definerer, hvad der er tilgængeligt for brugerne af biblioteket (A.K.A public API).

Hvis du åbner my-lib.component.ts, vil du se følgende kode: 

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 {}}
Enter fullscreen mode Exit fullscreen mode

Dette enkle biblioteks output my-lib works!, og vi bruger selector,
<lib-my-lib></lib-my-lib> til at forbruge komponenten.

Installer biblioteket som npm-afhængighed.

For at bruge et bibliotek i angular skal du installere det fra pakkehåndtering som npm. I dette eksempel vil vi ikke udgive vores bibliotek til npm-pakkehåndtering. Hvis du vil lære om, hvordan du udgiver angularbibliotek, henvises til angularguide.

Nu skal vi installere my-lib som npm-afhængighed fra filen. Åbn package.json og tilføj "my-lib": "file:projects/my-lib" i afhængighedsblokken, Se kodestumpen nedenfor. 

 "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" }
Enter fullscreen mode Exit fullscreen mode

my-lib er det pakkenavn, du vil se i node_modules-mappen, og file:projects/my-lib er det faktiske bibliotek. Hvis vi havde offentliggjort vores bibliotek til npm, ville vi erstatte file:projects/my-lib med versionsnummer(0.0.1).

Hvis du kører npm install, vil du bemærke, at my-lib er tilføjet i node_modules-mappen. Nu kan vi importere og bruge biblioteket i vores projekt. se nedenstående kodestump: 

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

Nu da vi har importeret biblioteksmodulet i vores projekt, kan vi bruge MyLibComponent. Åbn app.component.html, og erstat al koden med
<lib-my-lib></lib-my-lib>.

Kør appen

Kør npm start eller for at starte appen. Åbn browseren og besøg http://localhost:4200, du vil se my-lib works! vises.

Tillykke, du har oprettet angular-biblioteket med succes!!!

Kode tilgængelig på github

Skriv en kommentar