Stephen Knutter

  Web & Mobile JS Developer

TypeScript Import Aliases in Angular

February 01, 2020

TypeScript Module Resolution

Install Angular CLI

Generate a new Angular App with the CLI

$ ng new angular-app
$ cd angular-app

In the root will be a tsconfig.json file

Go into the source file

$ cd src

Inside the source directory is a tsconfig.app.json file which extends tsconfig.json

This file is responsible for setting the baseUrl property inside compilerOptions

In order to setup import aliases add the baseUrl property inside the root tsconfig.json file

$ cd ..
// angular-app/tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "...Omitted Properties...": "...",

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

And that’s it, now you can import via:

import { Whatever } from '@app/whatever/file'

NOTE: May need to close and re-open code editor, as well as start and re-start app if already running