ATTENZIONE
Questa guida si applica ad Angular v11 e v12 con la Infn-App-Shell v11
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
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"
Aggiornamento delle librerie
È opportuno verificare ogni 2~3 mesi le nuove versioni, o comunque ogni volta si inizia a sviluppare un nuovo progetto. Consulta i calendari dei periodi di supporto.
# aggiorna node package manager └─[$] npm install -g npm # aggiorna angular-cli └─[$] npm install -g @angular/cli@latest # aggiorna la libreria └─[$] npm install -g @sysinfo/infn-app-shell@latest --legacy-peer-deps
L'aggiornamento della InfnAppShell termina con una lista di warning relativo alle dipendente peer. Posso essere ignorati in quanto saranno installate nel progetto.
Installazione in un progetto esistente
└─[$] ng add --collection @sysinfo/infn-app-shell \
--confirm=true \ # salta la richiesta di conferma in modalità interattiva
--dryRun=false \ # disattiva la modalità dry-run
--project=${PRJ_NAME} # può essere omesso per utilizzare il defaultProject del workspace
Attività propedeutiche
# creazione del nuovo workspace
└─[$] ng new --defaults true \
--create-application false \ # non crea l'applicazione di default
--legacy-browsers true \
--strict true \
--style scss ${WORKSPACE_NAME}
# creazione dell'applicazion (progetto)
└─[$] cd ${WORKSPACE_NAME}
└─[$] ng generate application \
--inline-style false \ # utilizza i file css per gli stili
--inline-template false \ # utilizza i file html per i template
--legacy-browsers true \ # attiva il supporto a IE11
--routing true \ # crea il routingModule di default
--strict true \ # attiva lo strict type checking in TS
--style scss \ # preprocessore css
--newProjectRoot . \ # non utilizza il workspace
${PRJ_NAME}