Quale versione Angular usa la mia applicazione?

In questo articolo vedrai come scoprire quale versione di Angular sta utilizzando la tua applicazione.

Ti mostrerò due metodi: il primo è utilizzabile per qualunque applicazione costruita Angular, il secondo è utilizzabile solo se hai accesso al file descritto delle dipendenze del progetto.

Indice

Quale versione Angular: tag html

Tutte le applicazioni costruite con Angular hanno “root”, posto solitamente come figlio del tag body.

Questo tag ha un attributo che indica la versione di Angular utilizzata per costruire quella applicazione web.

Prendere come esempio due siti costruiti utilizzando Angular:

Consideriamo ad esempio il primo dei due.

Al momento della scrittura dell’articolo, l’HTML della home è circa questo:

<body class="mat-typography docs-scroll-track-transparent-large" style="">
 <adev-root _nghost-ng-c3997628623="" ng-version="19.0.0" ng-server-context="ssg">
   ....
 </adev-root>
  .....
</body>

Noterai che il tag adev-root è caratterizzato dall’attributo ng-version.

Il valore di quell’attributo corrisponde alla versione di Angular utilizzata per generare quella pagina web.

Qui sopra puoi vedere uno screenshot del HTML della pagina ufficiale di Angular.

Quale versione Angular: descrittore dipendenze

Questo metodo prevede di analizzare il file descrittore delle dipendenze del progetto Angular.

Solitamente, i progetti costruiti con Angular hanno le dipendenze gestite tramite npm o yarn.

In entrambi i casi, dovremo controllare il file package.json.

Qui sotto troverai un esempio di file package.json.

{
  "name": "angular",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular/cli": "~14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.7.2"
  }
}

Come puoi vedere, nella sezione dependencies sono presenti numerosi pacchetti contenenti la parola angular.

Solitamente, dovrebbero essere tutti alla stessa versione.

Il primo numero ( la major del pacchetto ) corrisponde alla versione di Angular utilizzata per costruire il progetto.

Approfondimenti Angular

In questo sito puoi trovare diversi articoli relativi ad Angular, RxJS ed al Web development.

Eccone alcuni:

Conclusioni

Conoscere la versione di Angular utilizzata in un’applicazione web è un passaggio fondamentale per comprendere le sue dipendenze, valutare la compatibilità con nuove librerie e pianificare eventuali aggiornamenti.

In questo articolo abbiamo esplorato due metodi principali per individuare questa informazione: attraverso il file package.json, consultabile nel progetto, e mediante l’utilizzo degli strumenti per sviluppatori del browser.

Entrambi i metodi offrono soluzioni semplici ed efficaci per ottenere la versione di Angular, sia che si abbia accesso diretto al codice sorgente, sia che si stia analizzando un’applicazione già distribuita.

Avere un quadro chiaro della versione in uso non solo facilita la gestione del progetto, ma permette anche di restare aggiornati sulle nuove funzionalità e sulle best practice del framework, garantendo così un’applicazione più performante e sicura.