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 ‘buildanja‘ Angular 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.
1 |
$ ng -v |
Pokretanjem sljedeće naredbe uklanjam trenutnu verziju s računala
1 |
$ npm uninstall -g angular-cli |
Odmah ću očistiti i cache
1 2 |
$ npm cache verify $ npm cache clean (--force) |
Sada ću instalirati novi @angular/cli
1 |
$ npm install -g @angular/cli@latest |
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
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
{ "name": "AngularWebApp", "version": "0.0.1", "description": "AngularWebApp - update", "author": "Tomislav Stanković", "license": "ISC", "main": "index.js", "angular-cli": {}, "scripts": { "ng": "ng", "start": "ng serve", "test": "ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/animations": "^4.4.6", "@angular/cdk": "^2.0.0-beta.12", "@angular/common": "^4.4.3", "@angular/compiler": "^4.4.3", "@angular/compiler-cli": "^4.4.3", "@angular/core": "^4.4.3", "@angular/forms": "^4.4.3", "@angular/http": "^4.4.3", "@angular/platform-browser": "^4.4.3", "@angular/platform-browser-dynamic": "^4.4.3", "@angular/router": "^4.4.3", "@ngui/auto-complete": "^0.14.4", "angular2-multiselect-dropdown": "^1.3.6", "core-js": "^2.5.1", "moment": "^2.20.1", "mydatepicker": "^2.0.22", "ng2-bs3-modal": "^0.10.4", "ngx-pagination": "^3.0.3", "pdfmake": "^0.1.35", "rxjs": "^5.4.3", "ts-helpers": "^1.1.1", "zone.js": "^0.8.17" }, "devDependencies": { "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "angular-cli": "^1.0.0-beta.28.3", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.3.0", "typescript": "^2.0.2" }, "keywords": [ "angular" ] } |
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
1 |
$ ng new AngularWebAppNew |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
{ "name": "angular-web-app-new", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^5.2.0", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "core-js": "^2.4.1", "rxjs": "^5.5.6", "zone.js": "^0.8.19", "@ngui/auto-complete": "^0.14.4", "angular2-multiselect-dropdown": "^1.3.6", "moment": "^2.20.1", "mydatepicker": "^2.0.22", "ng2-bs3-modal": "^0.10.4", "ngx-pagination": "^3.0.3", "pdfmake": "^0.1.35" }, "devDependencies": { "@angular/cli": "~1.7.4", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "~2.5.3" } } |
Nakon toga pokrećem sljedeću naredbu kako bi se ti moduli instalirali u projekt.
1 |
$ npm install |
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!
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
1 2 3 4 5 6 7 |
<link rel="stylesheet" type="text/css" href="./app/style/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="./app/style/css/style.css"> <link rel="stylesheet" type="text/css" href="./app/style/css/font-awesome.min.css"> <script src="./app/style/js/jquery.min.js"></script> <script src="./app/style/bootstrap/dist/js/bootstrap.min.js"></script> <script src="./app/style/js/main.js"></script> ... |
i stavljam ih unutar angular-cli.json
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... "styles": [ "styles.css", "./app/style/bootstrap/dist/css/bootstrap.min.css", "./app/style/css/style.css", "./app/style/css/font-awesome.min.css" ], "scripts": [ "./app/style/js/jquery.min.js", "./app/style/bootstrap/dist/js/bootstrap.min.js", "./app/style/js/main.js" ], ... |
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.