Utilizzare gli alias per semplificare l'import di file in Angular

di Stefano Mostarda, in HTML5, Angular,

Quando sviluppiamo un'applicazione Angular, l'operazione più comune che facciamo in un file è quella di importare altri file. Basta pensare alle direttive import che mettiamo in testa a ogni file per importare classi, interfacce, funzioni, variabili e altro ancora.
Il percorso verso il file esterno può essere espresso in due modi: attraverso il percorso completo (generalmente partendo dalla cartella src) o attraverso un percorso relativo che inizia dal file corrente. Al crescere dell'applicazione, tendenzialmente crescono anche le cartelle e le sottocartelle e questi percorsi sono sempre di più difficile comprensione. Per semplificare i percorsi, possiamo utilizzare degli alias.

// Senza alias 
import { MyComponent } from '/../../../shared/components/mycomponent';

// Con alias 
import { MyComponent } from '@shared/components/mycomponent';

Il valore @shared deve essere definito nel file di configurazione di TypeScript tsconfig.json presente nella root dell'applicazione.

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "@shared/*":["app/modules/shared/*"]
    }
    ...
  }
}

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Nessuna risorsa collegata

I più letti di oggi