00
:
00
:
00
:
00
•Corso SEO AI - Usa SEOEMAIL al checkout per il 30% di sconto

Installazione e Angular CLI

Edoardo Midali
Edoardo Midali

Prerequisiti

Prima di installare Angular, assicurati di avere Node.js e npm installati sul tuo sistema. Angular richiede una versione LTS attiva di Node.js.

# Verificare le versioni installate
node --version   # Minimo v18.x
npm --version    # Incluso con Node.js

Per installare Node.js, scaricalo dal sito ufficiale nodejs.org oppure utilizza un version manager come nvm (Node Version Manager):

# Con nvm (Linux/macOS)
nvm install --lts
nvm use --lts

# Verificare l'installazione
node -v
npm -v

Installare Angular CLI

Angular CLI (Command Line Interface) è lo strumento ufficiale per creare, sviluppare, testare e distribuire applicazioni Angular.

# Installazione globale
npm install -g @angular/cli

# Verificare l'installazione
ng version

L’output del comando ng version mostrerà la versione della CLI e le dipendenze principali:

Angular CLI: 18.x.x
Node: 20.x.x
Package Manager: npm 10.x.x

Aggiornare Angular CLI

# Aggiornare la CLI globale
npm install -g @angular/cli@latest

# Aggiornare un progetto esistente
ng update @angular/cli @angular/core

Creare un Nuovo Progetto con ng new

Il comando ng new crea un nuovo workspace Angular con la struttura completa del progetto.

# Creare un progetto con le opzioni di default
ng new mia-app

# Creare un progetto con opzioni specifiche
ng new mia-app --routing --style=scss --standalone

# Creare con prefix personalizzato per i selettori
ng new mia-app --prefix=mia

Opzioni principali di ng new

Opzione Descrizione Default
--routing Aggiunge il modulo di routing false
--style Preprocessore CSS (css, scss, sass, less) css
--standalone Usa standalone components (no NgModules) true (v17+)
--prefix Prefisso per i selettori dei componenti app
--skip-tests Non generare file .spec.ts false
--ssr Abilita Server-Side Rendering false
--dry-run Mostra i file che verrebbero creati senza crearli false 
# Esempio completo con tutte le opzioni
ng new e-commerce \
  --routing \
  --style=scss \
  --standalone \
  --prefix=ec \
  --ssr

ng serve - Server di Sviluppo

Il comando ng serve avvia un server di sviluppo locale con live reload.

# Avviare il server di sviluppo
ng serve

# Con opzioni personalizzate
ng serve --port 3000 --open

# Usare una configurazione specifica
ng serve --configuration=production

Opzioni di ng serve

# Aprire automaticamente il browser
ng serve --open  # oppure -o

# Specificare la porta
ng serve --port 4201

# Abilitare il polling per il file watching (utile in Docker)
ng serve --poll 1000

# Usare SSL
ng serve --ssl --ssl-cert ./cert.pem --ssl-key ./key.pem

# Specificare l'host (per accesso da rete)
ng serve --host 0.0.0.0

ng generate - Generare Elementi

Il comando ng generate (abbreviato ng g) crea automaticamente file e codice boilerplate per componenti, servizi, moduli e altro.

Generare Componenti

# Generare un componente
ng generate component header
# oppure abbreviato
ng g c header

# Componente standalone (default in Angular 17+)
ng g c card --standalone

# Componente senza file di test
ng g c footer --skip-tests

# Componente con inline template e stili
ng g c badge --inline-template --inline-style

# Componente in una sottocartella
ng g c features/dashboard

# Componente flat (senza cartella dedicata)
ng g c shared/bottone --flat

Generare Servizi

# Generare un servizio
ng g service services/auth

# Servizio senza file di test
ng g service services/logger --skip-tests

Generare Altri Elementi

# Generare una direttiva
ng g directive directives/evidenzia

# Generare una pipe
ng g pipe pipes/tronca

# Generare un guard
ng g guard guards/auth

# Generare un interceptor
ng g interceptor interceptors/token

# Generare un'interfaccia
ng g interface models/utente

# Generare un enum
ng g enum models/ruolo

# Generare un modulo (approccio NgModule)
ng g module features/admin --routing

Dry Run

Usa --dry-run (o -d) per vedere cosa verrebbe generato senza creare file:

ng g c lista-prodotti --dry-run

# Output:
# CREATE src/app/lista-prodotti/lista-prodotti.component.ts
# CREATE src/app/lista-prodotti/lista-prodotti.component.html
# CREATE src/app/lista-prodotti/lista-prodotti.component.scss
# CREATE src/app/lista-prodotti/lista-prodotti.component.spec.ts
# NOTE: The "--dry-run" option means no changes were made.

Altri Comandi Utili della CLI

ng build

# Build di sviluppo
ng build

# Build di produzione
ng build --configuration=production

# Analizzare il bundle
ng build --stats-json
# poi usare webpack-bundle-analyzer

ng test e ng e2e

# Eseguire i test unitari
ng test

# Test con code coverage
ng test --code-coverage

# Test end-to-end
ng e2e

ng lint

# Aggiungere ESLint al progetto (prima volta)
ng add @angular-eslint/schematics

# Eseguire il linting
ng lint

# Con fix automatico
ng lint --fix

ng add

# Aggiungere Angular Material
ng add @angular/material

# Aggiungere PWA support
ng add @angular/pwa

# Aggiungere SSR
ng add @angular/ssr

Configurazione del Workspace: angular.json

Il file angular.json è il file di configurazione principale del workspace Angular. Contiene la configurazione per build, serve, test e tutte le operazioni della CLI.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mia-app": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/mia-app",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "mia-app:build:production"
            },
            "development": {
              "buildTarget": "mia-app:build:development"
            }
          },
          "defaultConfiguration": "development"
        }
      }
    }
  }
}

Sezioni chiave di angular.json

  • projects: contiene tutti i progetti del workspace
  • architect.build.options: configurazione di build (assets, stili, script globali)
  • architect.build.configurations: configurazioni per ambienti diversi
  • budgets: limiti per la dimensione del bundle

Personalizzare i Budget

I budget aiutano a mantenere sotto controllo le dimensioni del bundle:

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kB",
    "maximumError": "1MB"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "4kB",
    "maximumError": "8kB"
  }
]

File di Configurazione Correlati

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": ["ES2022", "dom"]
  }
}

Best Practices

  • Mantieni la CLI sempre aggiornata con ng update
  • Usa --dry-run prima di generare elementi complessi
  • Configura budgets appropriati per monitorare le dimensioni del bundle
  • Utilizza ambienti separati (development, staging, production) per gestire configurazioni diverse
  • Sfrutta ng add per integrare librerie che supportano schematics Angular
  • Abilita strict mode nel tsconfig.json per una maggiore sicurezza del codice
PrecedentePanoramicaSuccessivoStruttura del Progetto