Skip to main content

Installazione

Installa Tess UI Library nel tuo progetto Angular.

Requisiti​

  • Node.js 20+
  • Angular 18+
  • npm/yarn/pnpm

Installazione Base​

npm install @tess-ui-library/core

Installazione UI Kit (PrimeNG - Raccomandato)​

Per utilizzare PrimeNG come UI Kit (configurazione predefinita):

npm install primeng primeicons @primeuix/themes

Setup PrimeNG Theme​

Aggiungi il tema PrimeNG nel file 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"
            ]
          }
        }
      }
    }
  }
}

Oppure importa nel tuo styles.scss:

@import "primeicons/primeicons.css";
@import "@primeuix/themes/aura/aura-light-blue/theme.css";

Installazione UI Kit (Bootstrap)​

Se preferisci utilizzare Bootstrap:

npm install bootstrap @ng-bootstrap/ng-bootstrap

Configurazione Applicazione​

Nel file app.config.ts (o main.ts se usi bootstrapApplication):

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideTessUiLibrary({
      uiKit: 'primeng', // oppure 'bootstrap'
      logging: {
        level: 'info',
        enableConsole: true,
      },
    }),
    // altri providers...
  ],
};

Verifica Installazione​

Crea un componente di test:

import { Component, inject } from '@angular/core';
import { LoggerService } from '@tess-ui-library/core';

@Component({
  selector: 'app-test',
  standalone: true,
  template: `<h1>Tess UI Library Test</h1>`,
})
export class TestComponent {
  private logger = inject(LoggerService);

  constructor() {
    this.logger.info('Tess UI Library installata correttamente!');
  }
}

Prossimi Passi​