Vai al contenuto

ng-app

Shell Angular per micro frontend: più app in una, con accesso, permessi e layout pronti.

MITTypeScriptAttivoVersione 4.0.5

A cosa serve

Quando un'applicazione cresce, ogni nuova area rifà le stesse cose: login, permessi, menu, traduzioni, pagine di errore. Con ng-app queste parti stanno in un core sottile per Angular 22, che si configura con una sola chiamata: provideRlbConfig(). Ogni area diventa un'app descritta in poche righe. Sulla stessa base convivono più portali, divisi per dominio, e più copie della stessa app, per esempio una per azienda. Noi la usiamo in Chattoo e continuiamo a pubblicarne nuove versioni. La guida in italiano è già su GitHub Pages; il README completo è in preparazione.

Installazione

ng add @open-rlb/ng-app

Esempio

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideRlbConfig(environment),
    provideRouter(routes),
    { provide: RLB_INIT_PROVIDER, useClass: AppInitProvider },
    // provideApp(myAppDescriber), una riga per ogni app
  ],
};

export const chatDescriber: AppDescriber = {
  info: {
    type: 'chat',
    enabled: true,
    actions: ['chat-read', 'chat-admin'],
    core:     { title: 'Chat', description: '…', url: 'chat', icon: 'bi bi-chat', auth: true },
    settings: { title: 'Chat settings', description: '…', url: 'settings/chat', icon: 'bi bi-gear', auth: true },
  },
  routes,
  providers: [],
};

Cosa fa

Un core, più app

Ogni app ha un descrittore con nome, icona, rotte e permessi richiesti, e si aggiunge al core con provideApp(). Le app si compilano insieme al core, in un'unica applicazione.

Accesso con OIDC

Login con authorization code flow e refresh token tramite angular-auth-oidc-client, uno o più provider scelti in base al dominio, rinnovo del token gestito dalla libreria. La pagina del profilo usa le API account di Keycloak.

Permessi fino al singolo bottone

Dopo il login la libreria scarica i permessi dell'utente. Le guard proteggono le rotte e la direttiva *roles nasconde quello che l'utente non può usare.

La shell è già pronta

Barra di navigazione, menu laterale fino a 3 livelli, menu per il telefono, tema chiaro o scuro e scelta della lingua. Si configura con azioni NgRx: il layout della shell non va scritto.

Le pagine che servono sempre

Impostazioni, profilo, elenco delle app e accesso negato ci sono sempre, le prime tre dietro il login. Pagina non trovata, privacy, termini, cookie e supporto si accendono dalla configurazione.

Si parte con ng add

In un workspace vuoto, ng add crea l'app core con le configurazioni production, staging e development. Nel pacchetto ci sono anche 5 skill per Claude Code, allineate alla versione installata.

Requisiti

  • Angular 22
  • NgRx 22
  • @open-rlb/ng-bootstrap 5.1 o successiva (5.x)
  • angular-auth-oidc-client dalla 19 alla 21
  • @ngx-translate/core 16 o 17
  • ngx-cookie-service 22

Codice, versioni e segnalazioni stanno su GitHub.