Angular Tips #1 — get rid of the long relative import paths

Problem

It might not be an issue for everybody, but in the big Angular projects where you have many modules and a lot of nested catalogs, it might get uncomfortable to have imports like:

import {SharedModel} from '../../../shared/shared.model';
import {RequestModel} from '../../../shared/api.model';

Why?

1. Any refactor of your component location will force you to update relative import path
2. Any refactor of imported files location will force you to update all the files, where these files were referenced

Solution 1 — paths aliases

You can define namespaces and shorten your imports with TypeScript. In your tsconfig.json , under “compilerOptions”:

1. Change “baseUrl” from “./” to “src”
2. Add “paths” section and provide path aliases

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

Thanks to this configuration, previous import can be shortened to:

import {SharedModel} from '@app/shared/shared.model';
import {RequestModel} from '@app-shared/api.model';

Full tsconfig.json file below:

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@env/*": ["environments/*"],
"@app/*": ["app/*"],
"@app-shared/*": ["app/shared/*"]
},
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}

Solution 2 — Barrel imports

You might not want to know only exactly in which file your model is located. You can also have a lot of files (separate file from “core” business model, another one for forms model, another one for api model, multiplied by a number of business domains…).

Your imports — even if shortened, might look like:

import {ApiModel01} from '@app-shared/domain01/api.model';
import {MyForm01} from '@app-shared/domain01/forms.model';
import {BusinessModel01} from '@app-shared/domain01/business.model';
import {ApiModel02} from '@app-shared/domain02/api.model';
import {MyForm02} from '@app-shared/domain02/forms.model';
import {BusinessModel02} from '@app-shared/domain02/business.model';

In such case, you don’t have a problem with the relative paths. You have a problem with a lot of imports. I recommend to use Barrel imports in such case.

1. Add index.ts file to shared/domain01 directory
2. Add index.ts file to shared/domain02 directory

In index.ts file add exports of all the files included in this directory:

export * from './api.model';
export * from './forms.model';
export * from './business.model';

Now, you can import model in your component like this:

import {ApiModel01, MyForm01, BusinessModel01} from '@app-shared/domain01/';
import * as fromDomain02 from '@app-shared/domain02/';
/*
In case of import with alias, You can access files like below:
fromDomain02.ApiModel01
fromDomain02.Myform02
fromDomain02.BusinessModel01
*/

Words by Aleksander Kołata, Senior Full Stack Developer at Altimetrik Poland

Copywriting by Kinga Kuśnierz, Content Writer at Altimetrik Poland