Angular Libraries

Angular-bibliotek byggs som en lösning på allmänna problem, t.ex. att presentera ett enhetligt användargränssnitt, presentera data och tillåta datainmatning. Utvecklare kan skapa allmänna lösningar för särskilda områden som kan anpassas för återanvändning i olika appar. Dessa lösningar kan byggas som Angular-bibliotek och dessa bibliotek kan publiceras och delas som npm-paket.

Ett Angular-bibliotek är ett Angular-projekt, men det skiljer sig från Angular-appen på så sätt att det inte kan köras på egen hand. Det importeras och används i appen.

Användning av Angular-bibliotek

• Angular-bibliotek utökar Angulars basfunktioner. Om du till exempel vill lägga till reaktiva formulär i en app lägger du till bibliotekspaketet med hjälp av ng add @angular/forms och importerar sedan ReactiveFormsModule från biblioteket @angular/forms i din programkod.
• Angular Material är ett exempel på ett stort, allmänt bibliotek som tillhandahåller sofistikerade, återanvändbara och anpassningsbara gränssnittskomponenter.

Installation av bibliotek

Bibliotek publiceras som npm-paket och integreras med Angular CLI. För att integrera återanvändbar bibliotekskod i en applikation måste vi installera paketet och importera den tillhandahållna funktionaliteten där vi ska använda den.

Syntax

Kommandot ng add använder npm-pakethanteraren för att installera bibliotekspaketet och anropar scheman som ingår i paketet till andra ställningar i projektkoden, till exempel att lägga till importutsagor, typsnitt, teman och så vidare.

Bibliotekstypning

Bibliotekspaket innehåller typningar i .d.ts-filer. Om ditt bibliotekspaket inte innehåller typningar och IDE visar ett fel måste du installera bibliotekets associerade @types/-paket.

Antag till exempel att du har ett bibliotek som heter d1:

Typer som definieras i ett @types/-paket för ett bibliotek som installeras i arbetsområdet läggs automatiskt till i TypeScript-konfigurationen för det projekt som använder det biblioteket. TypeScript letar som standard efter typer i mappen node_modules/@types, så du behöver inte lägga till varje typpaket individuellt.

Om ett bibliotek inte innehåller typningar i @types/ kan du ändå använda det genom att manuellt lägga till typningar för det. Du kan göra det på följande sätt:

Skapa en typings.d.ts-fil i din src/-mapp. Denna fil inkluderas automatiskt som global typdefinition.

Lägg till följande kod i src/typings.d.ts.

Lägg till följande kod i den komponent eller fil som använder biblioteket:

Uppdatering av bibliotek

Du kan uppdatera biblioteken med kommandot ng update. Det uppdaterar enskilda biblioteksversioner. Angular CLI kontrollerar den senaste publicerade versionen av biblioteket, och om den finner att den senaste versionen är nyare än din installerade version, hämtar den den och uppdaterar din package.json för att matcha den senaste versionen.

Syntax

Notera: När du uppdaterar Angular till en ny version måste du se till att alla bibliotek du använder är aktuella. Om biblioteken har inbördes beroenden måste även de uppdateras.

Hur du lägger till ett bibliotek i runtime global scope

Legacy JavaScript-bibliotek som inte importeras till en app kan läggas till i runtime global scope och laddas som om de fanns i en skripttagg. Du måste konfigurera CLI för att göra detta vid byggtiden med hjälp av alternativen ”scripts” och ”styles” för byggmålet i CLI-konfigurationsfilen angular.json.

För att till exempel använda Bootstrap 4-biblioteket installerar du först biblioteket och dess beroenden med hjälp av pakethanteraren npm:

Lägg till CSS-filen Bootstrap till arrayen ”styles”:

Skapa nya bibliotek

Du kan skapa och publicera egna nya bibliotek för att utöka Angular-funktionerna. Det används i allmänhet när du behöver lösa samma problem i mer än en app (eller vill dela din lösning med andra utvecklare) och du har en kandidat för ett bibliotek.

Till exempel: Du kan skapa en knapp som skickar användare till ditt företags webbplats och som ska ingå i alla appar som ditt företag bygger.

Öppna Angular CLI och använd följande syntax för att skapa ett nytt bibliotek.

Syntax

Detta kommer att skapa en mapp projects/my-lib i ditt arbetsutrymme, som innehåller en komponent och en tjänst i en NgModule. Konfigurationsfilen för arbetsutrymmet, angular.json, uppdateras med ett projekt av typen ”library”.

Nu kan du bygga, testa och linta ditt projekt med följande kommandon: