Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Creazione di un progetto vuoto interamente configurato

Code Block
languagebash
themeMidnight
linenumberstrue
# modalità non interattiva
└─[$] ng new --collection @si-experimental@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 @si-experimental@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

Info

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

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

Code Block
languagebash
themeMidnight
linenumberstrue
# registrazione della URL del registry
└─[$] npm config set @si-experimental:registry @sysinfo:registry http://artifactory.dsi.infn.it/artifactory/api/npm/sysinfo-npm/

# registrazione delle credenziali (modalità interattiva)
└─[$] npm login --registry http://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://baltigartifactory.dsi.infn.it/artifactory/api/v4npm/packages/npm/sysinfo-npm/.

# alternativo ad "npm login" 
# recuperare la "encrypted password" da https://artifactory.dsi.infn.it/artifactory/webapp/#/profile
└─[$] npm config set '//baltigartifactory.dsi.infn.it/artifactory/api/v4/packages/npm/:\_authToken/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' "${YOURAAI_GITLAB_TOKEN}"

Creazione del token

Il token deve essere creato dalla pagina del proprio profilo su Baltig:

  • accedere a Baltig in questa pagina (personal access token)
  • indicare un nome per il token (consigliato "npmrc")
  • selezionare almeno "read_registry"
    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

    Info

    È 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.


    Code Block
    themeMidnight
    linenumberstrue
    # 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 @si-experimental@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

    Code Block
    languagebash
    themeMidnight
    linenumberstrue
    └─[$] ng add --collection @si-experimental@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

    Code Block
    languagebash
    themeMidnight
    linenumberstrue
    # 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}

    Approfondimenti

    1. Typescript strict type checking: link
    2. Modifica "a mano" del progetto: pagina




    Table of Contents
    outlinetrue
    stylecerchio
    printablefalse