ATTENZIONE

Questa guida si applica ad Angular v13 con la Infn-App-Shell v13

Attività propedeutiche

Configurazione del registry INFN

Da eseguire soltanto una volta per ogni postazione in cui si sviluppa

Questa configurazione è necessaria affinché NPM possa cerca i pacchetti nello scope "@sysinfo" su artifactory, anziché su npmjs.org.

# registrazione della URL del registry
└─[$] npm config set @sysinfo:registry https://artifactory.dsi.infn.it/artifactory/api/npm/sysinfo-npm/

# registrazione delle credenziali (modalità interattiva)
└─[$] npm login --registry https://artifactory.dsi.infn.it/artifactory/api/npm/sysinfo-npm/
Username: ${TYPE_YOU_AAI_USER}
Password: ${TYPE_YOU_AAI_PASSWORD}
Email: (this IS public) ${TYPE_YOU_AAI_USER}@infn.it
Logged in as <USERNAME> on https://artifactory.dsi.infn.it/artifactory/api/npm/sysinfo-npm/.

# alternativo ad "npm login" 
# recuperare la "encrypted password" da https://artifactory.dsi.infn.it/
# in alto a destra "set me up", quindi seguire le istruzioni
# qui sono riportate per comodità 
└─[$] npm config set '//artifactory.dsi.infn.it/artifactory/api/npm/sysinfo-npm/:_password' "`echo -n "${ENCRYPTED_PWD}" | base64`"
└─[$] npm config set '//artifactory.dsi.infn.it/artifactory/api/npm/sysinfo-npm/:username' "${AAI_USER}"
└─[$] npm config set '//artifactory.dsi.infn.it/artifactory/api/npm/sysinfo-npm/:email' "${AAI_USER}@infn.it"
└─[$] npm config set '//artifactory.dsi.infn.it/artifactory/api/npm/sysinfo-npm/:always-auth' "true"

Creazione di un progetto vuoto interamente configurato

# creazione del nuovo progetto con il template standard di angular
└─[$] ng new ${PRJ_NAME} \          # nome del progetto (se omesso va specificato in modalità interattiva)
	 	--strict true \             # attiva lo strict mode
		--routing true \            # produce il modulo di routing
		--style scss                # specifica l'utilizzo di SCSS come preprocessore di default
└─[$] cd ${PRJ_NAME}

# personalizzazione del progetto 
└─[$] npm install @sysinfo/infn-app-shell      # aggiunge la dipendenza al progetto
└─[$] ng add  @sysinfo/infn-app-shell \        # esegue la procedura di patch
       --confirm=true \                        # salta la richiesta di conferma in modalità interattiva
       --dryRun=false                          # disattiva la modalità dry-run

# si può iniziare lo sviluppo
└─[$] code . && ng serve -o

Viene generato un workspace angular ed un progetto nella directory principale. Il progetto è già modificato affinché si possa sviluppare con la InfnAppShell


Upgrade di progetti con Angular v11 oppure v12

# aggiornamento del progetto da angular v11 alla v12 (OPZIONALE)
└─[$] npx @angular/cli@12 update @angular/core@12 @angular/cli@12 --force
└─[$] ng update

# aggiornamento del progetto da angular v12 alla v13
└─[$] npx @angular/cli@13 update @angular/core@13 @angular/cli@13 --force
└─[$] ng update

# aggiornamento della libreria
└─[$] ng add @sysinfo/infn-app-shell --confirm=true --dryRun=false --force


  • No labels