Skip to main content

Setup e Configurazione

Guida completa alla configurazione iniziale di Tess UI Library.

Configurazione Base​

Provider Principale​

Usa provideTessUiLibrary() per configurare la libreria:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideTessUiLibrary } from '@tess-ui-library/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideRouter } from '@angular/router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideTessUiLibrary({
      uiKit: 'primeng',  // 'primeng' | 'bootstrap' | 'material'
      logging: {
        level: 'info',
        enableConsole: true,
      },
    }),
  ],
};

Bootstrap Applicazione​

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Opzioni di Configurazione​

TessUiLibraryConfig​

interface TessUiLibraryConfig {
  uiKit?: 'primeng' | 'bootstrap' | 'material';
  
  logging?: {
    level?: 'debug' | 'info' | 'warn' | 'error';
    enableConsole?: boolean;
    appInsights?: {
      connectionString: string;
      enableAutoRouteTracking?: boolean;
    };
  };
  
  theme?: {
    defaultTheme?: string;
    themes?: string[];
  };
  
  traceability?: {
    enabled?: boolean;
    storageKey?: string;
  };
  
  storage?: {
    namespace?: string;
  };
}

Configurazione Completa​

Esempio Produzione​

// app.config.ts
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideTessUiLibrary } from '@tess-ui-library/core';
import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(
      withInterceptors([
        authInterceptor,
        errorInterceptor,
      ])
    ),
    provideTessUiLibrary({
      uiKit: 'primeng',
      
      logging: {
        level: environment.production ? 'warn' : 'debug',
        enableConsole: !environment.production,
        appInsights: environment.production ? {
          connectionString: environment.appInsightsConnectionString,
          enableAutoRouteTracking: true,
        } : undefined,
      },
      
      theme: {
        defaultTheme: 'light',
        themes: ['light', 'dark', 'high-contrast'],
      },
      
      traceability: {
        enabled: true,
        storageKey: 'myapp:traceId',
      },
      
      storage: {
        namespace: 'myapp',
      },
    }),
  ],
};

Esempio Sviluppo​

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideTessUiLibrary({
      uiKit: 'primeng',
      
      logging: {
        level: 'debug',
        enableConsole: true,
      },
      
      theme: {
        defaultTheme: 'light',
      },
    }),
  ],
};

Configurazione UI Kit Specifiche​

PrimeNG Setup​

npm install primeng primeicons @primeuix/themes
// app.config.ts
import { provideTessUiLibrary } from '@tess-ui-library/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),  // Richiesto per PrimeNG
    provideTessUiLibrary({ uiKit: 'primeng' }),
  ],
};
// angular.json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/primeicons/primeicons.css",
              "node_modules/@primeuix/themes/aura/aura-light-blue/theme.css",
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}

Bootstrap Setup​

npm install bootstrap @ng-bootstrap/ng-bootstrap
// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideTessUiLibrary({ uiKit: 'bootstrap' }),
  ],
};
// styles.scss
@import "bootstrap/scss/bootstrap";

Material Setup​

npm install @angular/material @angular/cdk
// app.config.ts
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    provideTessUiLibrary({ uiKit: 'material' }),
  ],
};
// styles.scss
@import '@angular/material/prebuilt-themes/indigo-pink.css';

Inizializzazione Servizi​

APP_INITIALIZER​

Per inizializzazioni asincrone all'avvio:

// app.config.ts
import { APP_INITIALIZER } from '@angular/core';
import { MenuService } from '@tess-ui-library/core';

export function initializeApp(menuService: MenuService): () => Promise<void> {
  return () => {
    return new Promise((resolve) => {
      // Inizializza menu
      menuService.setMenuItems(menuItems);
      
      // Altre inizializzazioni...
      
      resolve();
    });
  };
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideTessUiLibrary(),
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [MenuService],
      multi: true,
    },
  ],
};

Validatori Asincroni​

import { APP_INITIALIZER } from '@angular/core';
import { AsyncValidatorRegistry } from '@tess-ui-library/core';

export function initializeValidators(
  registry: AsyncValidatorRegistry,
  userService: UserService
): () => void {
  return () => {
    registry.registerAsyncValidator(
      'uniqueEmail',
      CommonAsyncValidators.uniqueEmail((email) =>
        userService.checkEmailExists(email)
      )
    );
    
    registry.registerAsyncValidator(
      'uniqueUsername',
      CommonAsyncValidators.uniqueValue((username) =>
        userService.checkUsernameExists(username)
      )
    );
  };
}

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeValidators,
      deps: [AsyncValidatorRegistry, UserService],
      multi: true,
    },
  ],
};

Configurazione Multi-Environment​

Environment Files​

// environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
  appInsightsConnectionString: '',
  uiKit: 'primeng' as const,
  logLevel: 'debug' as const,
};

// environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.production.com',
  appInsightsConnectionString: 'InstrumentationKey=xxx',
  uiKit: 'primeng' as const,
  logLevel: 'warn' as const,
};

Uso negli Config​

import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTessUiLibrary({
      uiKit: environment.uiKit,
      logging: {
        level: environment.logLevel,
        enableConsole: !environment.production,
        appInsights: environment.production ? {
          connectionString: environment.appInsightsConnectionString,
        } : undefined,
      },
    }),
    {
      provide: API_BASE_URL,
      useValue: environment.apiUrl,
    },
  ],
};

Feature Modules​

Configurazione Lazy-Loaded Features​

// features/admin/admin.routes.ts
import { Routes } from '@angular/router';

export const adminRoutes: Routes = [
  {
    path: '',
    loadComponent: () => import('./admin.component').then(m => m.AdminComponent),
    children: [
      {
        path: 'users',
        loadComponent: () => import('./users/users.component').then(m => m.UsersComponent),
      },
    ],
  },
];
// app.routes.ts
export const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: 'dashboard',
        loadComponent: () => import('./dashboard/dashboard.component').then(m => m.DashboardComponent),
      },
      {
        path: 'admin',
        loadChildren: () => import('./features/admin/admin.routes').then(m => m.adminRoutes),
        canActivate: [authGuard],
      },
    ],
  },
];

Testing Setup​

Test Configuration​

// test-setup.ts
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

Component Tests​

import { TestBed } from '@angular/core/testing';
import { provideTessUiLibrary } from '@tess-ui-library/core';

describe('MyComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MyComponent],
      providers: [
        provideTessUiLibrary({
          uiKit: 'primeng',
          logging: { level: 'error', enableConsole: false },
        }),
      ],
    }).compileComponents();
  });

  it('should create', () => {
    const fixture = TestBed.createComponent(MyComponent);
    expect(fixture.componentInstance).toBeTruthy();
  });
});

Docker Setup​

Dockerfile​

# Build stage
FROM node:20-alpine AS build

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build -- --configuration=production

# Production stage
FROM nginx:alpine

COPY --from=build /app/dist/your-app /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

# Script per iniettare variabili d'ambiente
COPY inject-env.sh /docker-entrypoint.d/inject-env.sh
RUN chmod +x /docker-entrypoint.d/inject-env.sh

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Runtime Configuration​

#!/bin/sh
# inject-env.sh

set -e

# Crea file config.js con variabili d'ambiente
cat > /usr/share/nginx/html/assets/config.js << EOF
window.__env = {
  apiUrl: '$API_URL',
  appInsightsKey: '$APP_INSIGHTS_KEY',
  environment: '$ENVIRONMENT'
};
EOF

exec "$@"

Carica nel bootstrap:

// main.ts
import { environment } from './environments/environment';

declare global {
  interface Window {
    __env?: {
      apiUrl: string;
      appInsightsKey: string;
      environment: string;
    };
  }
}

// Override con runtime config se disponibile
if (window.__env) {
  Object.assign(environment, window.__env);
}

bootstrapApplication(AppComponent, appConfig);

Vedi Anche​