Creazione di un progetto vuoto interamente configurato
# modalità non interattiva
└─[$] ng new --collection @sysinfo/infn-app-shell \
--name ${PRJ_NAME} \ # nome del progetto (se omesso va specificato in modalità interattiva)
--root ${PRJ_DIR} # directory del progetto (se omesso è uguale al nome del progetto)
# modalità interattiva
└─[$] ng new --collection @sysinfo/infn-app-shell
? What is the name of your project? Brand New Application
? In which directory (if blank is used the project's name)?
# si può iniziare lo sviluppo
cd ${PRJ_DIR} && ng serve -o
code ${PRJ_DIR}
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/artifactory/webapp/#/profile
└─[$] 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"
# NOTA: i parametri :username e :_password possono essere sostituiti da :_auth valorizzando con "`echo -n "${AAI_USER}:${ENCRYPTED_PWD}" | base64`" ma in ogni caso è necessario recuperare la "encrypted password"
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 (utilizzare la versione 6 fin quando angular 11 sarà compatibile con la versione 7) └─[$] npm install -g npm@6 # 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}