Skapa Angular-bibliotek

av

I dag ska vi skapa ett nytt återanvändbart bibliotek. Om du upptäcker att du skapar samma komponent i mer än en app (eller om du vill dela din komponent med andra utvecklare) har du ett behov av ett bibliotek.

Skapa projektet

Vi kommer att använda angular cli för att generera biblioteksskelett. Om du inte har angular cli installerat, se angular cli installationsguide.

Följande kommandon genererar angularprojekt my-project och bibliotek my-lib

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

Detta skapar projects/my-lib i mappen my-project, som innehåller
my-lib.component.ts och my-lib.service.ts. Angular cli skapade också public-api.ts i mappen my-lib. Denna fil innehåller följande kodrader,

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

Denna fil definierar vad som är tillgängligt för användarna av biblioteket (A.K.A public API).

Om du öppnar my-lib.component.ts ser du följande kod:

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

Denna enkla biblioteksutgång my-lib works! och vi använder selector,
<lib-my-lib></lib-my-lib> för att konsumera komponenten.

Installera biblioteket som npm-dependency.

För att använda något bibliotek i angular måste du installera det från pakethanteraren, till exempel npm. I det här exemplet publicerar vi inte vårt bibliotek till npm package manager. Om du vill lära dig hur du publicerar angularbibliotek hänvisar du till angularguiden.

Nu installerar vi my-lib som npm-beroende från filen. Öppna package.json och lägg till "my-lib": "file:projects/my-lib" i blocket för beroenden, Se kodutdraget nedan. 

 "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 är paketnamnet som du kommer att se i mappen node_modules och file:projects/my-lib är det faktiska biblioteket. Om vi hade publicerat vårt bibliotek till npm skulle vi ersätta file:projects/my-lib med versionsnummer(0.0.1).

Om du kör npm install ser du att my-lib har lagts till i mappen node_modules. Nu kan vi importera och använda biblioteket i vårt projekt. se kodutdrag nedan:

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

Nu när vi importerat biblioteksmodulen i vårt projekt kan vi använda MyLibComponent. Öppna app.component.html och ersätt all kod med
<lib-my-lib></lib-my-lib>.

Kör appen

Kör npm start eller ng serve för att starta appen. Öppna webbläsaren och besök http://localhost:4200, du kommer att se my-lib works! visas.

Grattis, du har lyckats skapa ett angularbibliotek!!

Kod tillgänglig på github

Lämna en kommentar