Ažuriranje Angular projekta sa angular-cli na @angular/cli

Ažuriranje Angular projekta sa angular-cli na @angular/cli

U ovom ću blog postu pokazati postupak ažuriranja Angular CLI-a sa verzije angular-cli (1.0.0-beta.28.3) na verziju @angular/cli (1.7.4).

Zašto ažuriranje?

Angular ima mnogo značajki kao što su TypeScript i Ahead of Time (AOT) koje pomažu kod prepoznavanja pogrešaka prilikom ‘buildanjaAngular aplikacije. Tim koji stoji iza Angulara trudi se svakom novom verzijom te značajke poboljšavati kako bi prepoznale još više grešaka i radile brže.

Zbog toga se zna dogoditi da kod ažuriranja na noviju verziju budu prepoznate neke greške koje ranije nisu bile uočene.

Uz to, ne treba zaboraviti niti dosta novih značajki koje dolaze s novijim verzijama kao što su Service Worker za progresivne web aplikacije (PWA) i mnoge druge.

Sve to su razlozi za ažuriranje.

Kako ažurirati?

Ažuriranje je potrebno napraviti na dvije razine. Globalno na računalu i lokalno tj. unutar svakog projekta.

Globalna razina

Za početak, provjeravam trenutnu globalnu verziju CLI-a i vidim da je u pitanju angular-cli 1.0.0-beta.28.3 što znači da je ažuriranje potrebno.

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Pokretanjem sljedeće naredbe uklanjam trenutnu verziju s računala

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Odmah ću očistiti i cache

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Sada ću instalirati novi @angular/cli

Ažuriranje Angular projekta sa angular-cli na @angular/cli

I to je sve što se tiče globalne razine.

Lokalna razina

Sada se prebacujem unutar lokalnog projekta i ako ga pokušam pokrenuti koristeći $ ng serve dobit ću sljedeću poruku

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Uzrok tome nalazi se unutar package.json datoteke, a znači da se globalna i lokalna verzija CLI-a ne slažu i da zato nije moguće pokrenuti projekt.

Ako želim postojeći projekt prilagoditi da radi sa novim Angular CLI-em trebam napraviti više izmjena. S druge strane, imam i sljedeću opciju, a to je kreirati novi projekt i onda u njega prebaciti dijelove postojećeg projekta što ću sada i napraviti.

Novi projekt kreiram naredbom

Iz postojećeg projekta u novi prebaciti ću sljedeće:

– mapu src/assets
– mapu src/app
– datoteku src/index.html
– datoteku src/styles.css
– datoteku src/favicon.ico

Osim toga, unutar nove datoteke package.json trebam dodati i module iz postojećeg projekta.

package.json sada izgleda ovako. Označio sam module koje sam dodao iz ‘stare’ package.json datoteke

Nakon toga pokrećem sljedeću naredbu kako bi se ti moduli instalirali u projekt.

Ažuriranje Angular projekta sa angular-cli na @angular/cli

I to je to! Projekt je sada temeljen na novom Angular CLI-u i moguće ga je pokrenuti naredbom $ ng serve

CSS i JS se nisu učitali!

Ažuriranje Angular projekta sa angular-cli na @angular/cli

U slučaju da nisu učitane sve JS tj. CSS datoteke potrebno ih je iz src/index.html prebaciti unutar src/angular-cli.json na sljedeći način:

Iz index.html-a uzimam

i stavljam ih unutar angular-cli.json

Zaključak

Iako na prvu ovaj proces može djelovati komplicirano zapravo je vrlo logičan i jednostavan. Ovisno od projekta do projekta može se dogoditi da je potrebno napraviti još dodatne prilagodbe. O svemu tome obavijesti će se nalaziti unutar CMD prozora.

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa * (obavezno)