0

NPM Packages are imported like this:

import { Button, Table } from "@material-ui/core";

Which is pretty cool, because the path "@material-ui/core" can be compied into other files and still work independently from the copied file's folder structure.

Now I declared my own class, with a lot of exports, which I like to share between a lot of files. For example, I have:

root/shared/ui/ui-components.ts
root/app/pages/home/home-page.ts
root/app/pages/home/components/home-tile.ts

I'd like to import the ui-components.ts file in both the home-page.ts and home-tile.ts file. Both are imported as following:

for home-page:

import { ... } from "../../../shared/ui/ui-components";

for home-tile:

import { ... } from "../../../../shared/ui/ui-components";

Notice we have to go up one folder for the home-tile in order to access the same components. Copying this to other files won't work directly.

Is there a way so I can write

import { ... } from "ui-components";

in both home-page.ts and home-tile.ts file?

Nick Peelman
  • 145
  • 1
  • 11

1 Answers1

1

You can add your application source via paths in tsconfig.json:

{
  "compilerOptions": {
    ...,  
    "baseUrl": ".",
    "paths": {
      ...,
      "@app/*": ["app/*"],
      "@components/*": ["components/*"]
    }
  }
}

Then you can import absolutely from app/ or components/ instead of relative to the current file:

import {Configuration} from "@components/configurations";

Note: baseUrl must be specified if paths is

Jaykant
  • 390
  • 1
  • 9
  • Thanks! This is what I am looking for. With the right keywords which you provided I was able to find out this question is a duplicate of [link](https://stackoverflow.com/questions/43281741/how-to-use-paths-in-tsconfig-json). It's so important to know how to spell your question :) – Nick Peelman Sep 26 '19 at 13:17