{"id":673,"date":"2023-03-20T05:00:00","date_gmt":"2023-03-20T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=673"},"modified":"2023-03-16T17:30:14","modified_gmt":"2023-03-17T00:30:14","slug":"path-mapping-to-simplify-verbose-imports","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/path-mapping-to-simplify-verbose-imports\/","title":{"rendered":"Path mapping to simplify verbose imports"},"content":{"rendered":"\n<p>When an Angular application contains several modules or sub-folders, it can become challenging to maintain the readability of your Typescript imports. For instance:<\/p>\n\n\n\n<p><code>import {something} from '..\/..\/..\/..\/..\/shared\/shared.service'<\/code><\/p>\n\n\n\n<p>It&#8217;s always better to rely on your IDE to write those paths for you using autocompletion (usually ctrl + space). Still, imports don&#8217;t have to be that long. Typescript has a solution for that called <strong><a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/module-resolution.html#path-mapping\" target=\"_blank\" rel=\"noopener\" title=\"\">path mapping<\/a><\/strong>.<\/p>\n\n\n\n<p>The idea is to define common paths in the&nbsp;<strong>tsconfig.json<\/strong>&nbsp;file of your projects. Then, in the&nbsp;<strong><code>compilerOptions<\/code><\/strong>&nbsp;property, add or edit the paths config to provide some aliases for all of your long paths:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code><strong>\"paths\"<\/strong>: {\n  <strong>\"stubs\/*\"<\/strong>: [\n    <strong>\".\/src\/app\/stubs\/*\"\n  <\/strong>],\n  <strong>\"state\/*\"<\/strong>: [\n    <strong>\".\/src\/app\/state\/*\"\n  <\/strong>],\n  <strong>\"shared\/*\"<\/strong>: [\n    <strong>\".\/src\/app\/shared\/*\"\n  <\/strong>]\n}<\/code><\/pre>\n\n\n\n<p id=\"ffb9\">The above results in a shorter import syntax everywhere in your code:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import {something} from <strong>'shared\/shared.service'<\/strong><\/pre>\n\n\n\n<p>Of course, you can define as many path mappings as you need. Read that post for more of my favorite Typescript tips: <a href=\"https:\/\/blog.angulartraining.com\/5-typescript-tricks-for-angular-f5267432c8b0\" target=\"_blank\" rel=\"noopener\" title=\"\">5 Typescript tricks for Angular<\/a>. Some have already been covered in this newsletter, but all need reminders occasionally.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When an Angular application contains several modules or sub-folders, it can become challenging to maintain the readability of your Typescript imports. For instance: import {something} from &#8216;..\/..\/..\/..\/..\/shared\/shared.service&#8217; It&#8217;s always better to rely on your IDE to write those paths for you using autocompletion (usually ctrl + space). Still, imports don&#8217;t have to be that long. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-673","post","type-post","status-publish","format-standard","hentry","category-typescript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=673"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/673\/revisions"}],"predecessor-version":[{"id":679,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/673\/revisions\/679"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}