Een aangepaste bibliotheek maken met Angular
Een aangepaste bibliotheek maken
Om te beginnen moet u eerst een nieuw project maken met de CLI.
Om te beginnen moet u eerst een nieuw project maken met de CLI.
Op dit punt zou alles goed moeten zijn. Vanaf hier moeten we echter een commando gebruiken dat de CLI biedt in Angular 6 of hoger, en dat is ng generate. Deze ng generate bibliotheek is ontworpen om een aangepaste gedeelde bibliotheek te maken. Door je bibliotheek een naam te geven, wordt deze toegevoegd aan een apart project, dat een workspace wordt genoemd.
Wanneer je ng new uitvoert, krijg je een workspace met één project erin, en dat is je webproject. Deze ng generate voegt een tweede versie toe aan de werkruimte, zodat we onze bibliotheek kunnen testen in de Angular-app zonder deze te publiceren naar npm of een andere bron. Nu, dit wijzigt het tsconfig bestand en dat zal worden bijgewerkt zodat het Angular project, het aparte project in de werkruimte, begrijpt hoe het bij de bibliotheek kan komen, de gedeelde bibliotheek die we gaan bouwen.
Dan kun je je bibliotheek bouwen met het ng build commando en geef het dan de naam van je project, zoals dit:
Je kunt dit gebruiken en direct testen in het andere Angular project dat zich in je workspace bevindt. Dus, het maakt het heel gemakkelijk om dit te doen zonder ergens in npm te hoeven publiceren. Daarna zouden we willen publiceren naar npm zodra we klaar zijn om te gaan, we het hebben getest en het er goed uitziet, want we willen in staat zijn om in te trekken van npm, of het nu de npm is die er gewoon is en waar iedereen bij kan, of als het een interne npm is die je misschien hebt in je bedrijf. We willen die gebruiken in onze verschillende applicaties zodat we ze kunnen hergebruiken. Er is een link voor als je nieuw bent in het bijdragen aan npm.
We moeten dit doen om in de dist folder te komen en er zal een package.json bestand bij zitten. Dat gaat gebruikt worden om te publiceren naar npm. We hoeven alleen maar het volgende commando te schrijven:
Zo, zullen we eens kijken hoe het er in onze oplossing anders uitziet? Laten we gaan ☺.
Om te beginnen zul je zien dat we een projecten map hebben. We hebben nu ook een bijgewerkte tsconfig zoals je kunt zien in de volgende afbeelding:
Hiermee hebben we de paden toegevoegd naar waar we uiteindelijk onze dist-map gaan bouwen als we een build uitvoeren en daarom moet je eerst bouwen voordat je dit kunt doen omdat TypeScript hiernaar gaat kijken om dit allemaal te kunnen laten werken.
Nu, het andere grote ding dat is gedaan, is dat ons angular.json bestand een nieuw project bevat:
Dus, we hebben een secundair project hier, dat is onze braga-lib en je zult het pad daar zien voor de root van het project. Al het andere dat nodig is om te bouwen en te testen is inbegrepen. Dus, dat zijn de belangrijkste dingen die het wijzigt. Nu, wat we van hieruit kunnen doen is veranderingen aanbrengen aan onze bibliotheek. Dus, als we binnenkomen, zie je hier normale bestanden en een src map en dan voegen ze een lib toe zoals je kunt zien:
De lib gaat onze component, onze module en zelfs een service bevatten als je dat wilt. Als je het component-bestand opent, staat er eigenlijk alleen maar “braga-lib werkt!”.
Nou let op de selector “lib-braga-lib”. Je kunt dit veranderen, maar op dit moment laten we het zoals het is en laten we het gebruiken in ons Angular project. Laten we daar eens naar kijken? Oh ja ☺