14
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

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にある、baseUrlpathsというキーに設定を加えていきます。
app/tsconfig.app.jsonと間違えないように注意

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

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

終わりに

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

参考

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
14
Help us understand the problem. What are the problem?