Angular-bibliotheek maken

door

Vandaag gaan we een nieuwe herbruikbare bibliotheek maken. Als je dezelfde component in meer dan één app maakt (of als je je component met andere ontwikkelaars wilt delen), heb je een bibliotheek nodig.

Maak het project

We gaan angular cli gebruiken om het skelet van de bibliotheek te genereren. Als u angular cli niet hebt geïnstalleerd, raadpleeg dan de installatiegids van angular cli.

De volgende commando’s genereren angular project my-project en bibliotheek my-lib

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

Dit creëert projects/my-lib in my-project map, die
my-lib.component.ts en my-lib.service.ts bevat. Angular cli heeft ook public-api.ts bestand aangemaakt in my-lib map. Dit bestand bevat de volgende regels code,

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

Dit bestand definieert wat beschikbaar is voor de gebruikers van de bibliotheek (A.K.A publieke API).

Als u my-lib.component.ts opent, ziet u de volgende code:

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 {}}
Invoeren van de modus volledig scherm Uitgaan van de modus volledig scherm

De uitvoer van deze eenvoudige bibliotheek my-lib works! en we gebruiken de selector,
<lib-my-lib></lib-my-lib> om de component te consumeren.

Installeer de bibliotheek als npm dependency.

Om een bibliotheek in angular te gebruiken, moet je het installeren via package manager zoals npm. In dit voorbeeld zullen we onze bibliotheek niet publiceren naar npm package manager. Als u wilt leren over hoe u angular bibliotheek te publiceren, verwijzen wij u naar angular gids.

Nu zullen we my-lib installeren als npm afhankelijkheid van het bestand. Open package.json en voeg "my-lib": "file:projects/my-lib" toe aan het blok afhankelijkheden, zie de onderstaande code.

 "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" }
Invoeren van de modus Volledig scherm Sluiten van de modus Volledig scherm

my-lib is de pakketnaam die u in de map node_modules zult zien en file:projects/my-lib is de eigenlijke bibliotheek. Als we onze bibliotheek hadden gepubliceerd bij npm, zouden we file:projects/my-lib vervangen door versienummer(0.0.1).

Als u npm install uitvoert, zult u zien dat my-lib is toegevoegd aan node_modules map. Nu kunnen we de bibliotheek importeren en gebruiken in ons project. zie codefragment hieronder:

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

Nu we de bibliotheekmodule hebben geïmporteerd in ons project, kunnen we MyLibComponent gebruiken. Open app.component.html en vervang alle code door
<lib-my-lib></lib-my-lib>.

Start de app

Run npm start of ng serve om de app te starten. Open de browser en kijk op http://localhost:4200, u zult my-lib works! zien verschijnen.

Gefeliciteerd u heeft met succes de angular bibliotheek gemaakt!!

Code beschikbaar op github

Plaats een reactie