TypeScript Import Aliases in Angular
February 01, 2020
Generate a new Angular App with the CLI
$ ng new angular-app
$ cd angular-appIn the root will be a tsconfig.json file
Go into the source file
$ cd srcInside 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