Angularでインポートパスを短縮する

はじめに

このような、長ったらしいコンポーネントやサービスのimport文を...

import { LoginComponent } from './../../../auth/components/login/login.component';
import { LoginService } from '../../../auth/services/login.service';
import { DatePipe } from '../../lib/pipes/date.pipe';

次のようにスッキリさせる方法を紹介します。

import { LoginComponent } from '@auth/components/login/login.component';
import { LoginService } from '@auth/services/login.service';
import { DatePipe } from '@shared/lib/pipes/date.pipe';

やっていく

tsconfig.jsonののcompilerOptionsにある、baseUrlとpathsというキーに設定を加えていきます。
※ app/tsconfig.app.jsonと間違えないように注意

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
  // ...省略...
    "baseUrl": "src",
    "paths": {
      "@auth/*": ["app/auth/*"],
      "@shared/*": ["app/shared/*"]
    },
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

ここでは、モノレポっぽく@で始まる名前を使っていますが、使用しているライブラリなどのネームスペースと衝突しない限り自由に名前をつけることができます。

終わりに

今回紹介した内容は、Angularプロジェクト固有のものではなく、TypeScriptのモジュールシステムの機能を使った方法なので、様々なプロジェクトで応用できるかと思います。

参考

• Module Resolution -TypeScript
• Say Goodbye to ‘../../../..’ in your TypeScript Imports