Avoiding relative paths in Angular CLI

Question

I'm using the latest Angular CLI, and I've created a custom components folder which is a collection of all components.

For example, TextInputComponent has a TextInputConfiguration class which is placed inside src/components/configurations.ts, and in src/app/home/addnewuser/add.user.component.ts where I use it there is:

import {TextInputConfiguration} from "../../../components/configurations";

This is fine but as my app gets larger and deeper the ../ increases, how do I handle this?

Previously, for SystemJS, I would configure the path through system.config.js as below:

System.config({
..
 map : {'ng_custom_widgets':'components' },
 packages : {'ng_custom_widgets':{main:'configurations.ts', defaultExtension: 'ts'},
)};

How do I produce the same for webpack using Angular CLI?

Answer 1

Per this comment, 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 {TextInputConfiguration} from "@components/configurations";

Note: baseUrl must be specified if paths is.

See also

• https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping