web-profile

Angular Path Alias

Path aliases simplify paths by giving a link to the path rather than using the the full relative path.

// before:
import { SharedModule } from '../../shared/shared.module';
import { DatePipe } from '../../../date.pipe';
import { environment } from '../../../environments/environment';

// after:
import { SharedModule } from '@shared/shared.module';
import { DatePipe } from '@shared/pipes/date.pipe';
import { environment } from '@env/environment';

Path aliases are relative to compilerOptions.baseUrl. By default this is set to "./" so all path aliases we create must be fully qualified from the baseUrl.

Create the Aliases

This documentation uses a json program to modify the tsconfig.json file to simplify editing for everyone.

Run this command to install the json program:

json --version || sudo npm install -g json

json -f tsconfig.json -I -c "this.baseUrl = './'"
json -f tsconfig.json -I -c "this.compilerOptions.paths = {}"
json -f tsconfig.json -I -e "this.compilerOptions.paths['@app/*'] = ['src/app/*']"
json -f tsconfig.json -I -e "this.compilerOptions.paths['@core/*'] = ['src/app/core/*']"
json -f tsconfig.json -I -e "this.compilerOptions.paths['@shared/*'] = ['src/app/shared/*']"
json -f tsconfig.json -I -e "this.compilerOptions.paths['@env/*'] = ['src/environments/*']"

After our changes:

/* globally accessible app code (in every feature module) */
import { SomeSingletonService } from '@app/core';
import { environment } from '@env/environment';

/* localy accessible feature module code, always use relative path */
import { ExampleService } from './example.service';

tsconfig.json after the execution of the CLI commands:

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

Leave a Reply

Your email address will not be published.