Module Resolution in TypeScript using Globbing Pattern with multiple wildcards

Question

I'm working on an Angular project with the following folder structure (hypothetical):

src
└── app
    ├── component1
    │   └── component1.component.ts
    └── component2
        └── component2.component.ts
tsconfig.json

In my tsconfig.json I'm trying to define a path with globbing patterns in a way that importing from @components/component1 would resolve to src/app/component1/component1.component.

This is my tsconfig.json:

OTHER STUFF...

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

With this in place, I have the following import in some module/service/etc.:

import { Component1 } from '@components/component1';

The error I'm getting at compile time is:

ERROR in error TS5062: Substitution 'app/*/*.component' in pattern '@components/*' in can have at most one '*' character.

How can I achieve this without causing errors in the TypeScript compiler? What would be the proper way to write the globbing pattern in tsconfig.json?

Any help is appreciated.

Note

I don't want to do @components/component1/component1.

Answer 1

As compiler error says, there cannot be more than one * in paths entry.

This can potentially be solved with Webpack aliases, possibly via third-party plugin. If the project uses Angular CLI, Webpack configuration has to be ejected.

The problem with importing separate files like @components/component1/component1 is commonly solved with barrels, which are index.ts files that re-export directory contents:

export * from './component1.component';