Skapa ett anpassat bibliotek med Angular

Skapa ett anpassat bibliotek

För att komma igång måste du först skapa ett nytt projekt med hjälp av CLI.

Vi borde vara klara nu. Härifrån måste vi dock använda ett kommando som CLI tillhandahåller i Angular 6 eller högre, vilket är ng generate. Detta ng generate-bibliotek är utformat för att skapa ett anpassat delat bibliotek. Genom att ge ditt bibliotek ett namn kommer det sedan att läggas till i ett separat projekt som kallas workspace.

När du gör ng new får du ett workspace med ett projekt i det, vilket är ditt webbprojekt. Den här ng generate lägger till en andra version i arbetsområdet så att vi faktiskt kan testa vårt bibliotek i Angular-appen utan att publicera till npm eller någon annan resurs. Detta ändrar filen tsconfig och den kommer att uppdateras så att Angular-projektet, det separata projektet i arbetsutrymmet, förstår hur man kommer åt biblioteket, det delade biblioteket som vi kommer att bygga.

Därefter kan du bygga ditt bibliotek med kommandot ng build och sedan ge det namnet på ditt projekt, så här:

Du kan använda det här och testa det direkt i det andra Angular-projektet som finns i din arbetsyta. Så det gör det väldigt enkelt att göra detta utan att behöva publicera i npm någonstans. Efter det vill vi publicera till npm när vi är klara, vi har testat det och det ser bra ut, eftersom vi vill kunna dra in från npm, oavsett om det är npm som bara finns där ute och som alla kan komma åt, eller om det är ett internt npm som du kanske har på ditt företag. Vi vill kunna använda dem i våra olika applikationer så att vi kan återanvända dem. Det finns en länk om du är nybörjare när det gäller att bidra till npm som finns där ute.

Vi behöver göra det här för att gå in i mappen dist och det kommer att finnas en package.json-fil inkluderad. Den kommer att användas för att sedan publicera upp till npm. Vi behöver bara skriva följande kommando:

Så, ska vi se hur saker och ting är annorlunda i vår lösning? Låt oss gå ☺.

Så först och främst kommer du att märka att vi har en projektmapp. Vi har nu också en uppdaterad tsconfig som du kan se i följande bild:

Den har lagt till sökvägarna till var vi i slutändan kommer att bygga vår dist-mapp när vi väl bygger, och det är därför du måste bygga först innan du kan göra det här, eftersom TypeScript faktiskt kommer att titta på det här för att få det hela att fungera.

Nu, den andra stora saken som har gjorts är att vår angular.json-fil har ett nytt projekt i den:

Så, vi har ett sekundärt projekt precis här, vilket är vår braga-lib och du märker att det finns en sökväg där för roten av projektet. Nu är allt annat som behövs för att bygga och testa inkluderat. Så det är de viktigaste sakerna som ändras. Vad vi kan göra härifrån är att göra ändringar i vårt bibliotek. Så om vi kommer in så ser du normala filer här och en src-mapp och sedan vad de lägger till är ett lib som du kan se:

Biblioteket kommer att ha vår komponent, vår modul och till och med en tjänst om du vill ha det. Om du öppnar komponentfilen står det i stort sett bara ”braga-lib fungerar!”.

Nu lägger du märke till selektorn ”lib-braga-lib”. Du kan ändra detta, men just nu lämnar vi det som det är och använder det i vårt Angular-projekt. Låt oss ta en titt på det? Åh ja ☺