Angular 7, create import annotation (decorator?)

Question

I'm not sure what these are called but I want to create a custom annotation for imports. For example, I can do the following anywhere in my project:

import { SomeComponent } from '@app/components/some.component';

I'm talking about the @app part. No matter what file I'm in, @app will always take me to the src/app folder. How do I make my own?

If I had a file inside project/foo/bar/myfile.ts, how can I create an annotation that says @bar which takes them to the "bar" folder no matter where they are in the project folder structure.

I want to be able to do this:

import { MyFile } from '@bar/myfile';

Any help would be appreciated. Thank you!

You can configure custom prefixes for imports in your tsconfig under the `paths` object. See my answer for more info. — Edric, Mar 29 '19 at 15:15

score 1 · Accepted Answer · answered Mar 29 '19 at 15:21

Looks like what you're trying to do is to have a shorter path that you can import code from.

This can be done with the paths property of your TypeScript configuration file (usually tsconfig.json) (see the module resolution handbook for more info on the paths property).

See below for an example (P.s. don't copy the comments as it is invalid syntax for JSON files):

{
  // ...
  "paths": {
    "@app": [
      "./app"
    ],
    // Needed to resolve secondary paths
    "@app/*": [
      "./app/*"
    ]
  }
}

Angular 7, create import annotation (decorator?)

1 Answers1