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

Answer 2

Thanks to jonrsharpe's answer for pointing me in right direction. Although, after adding the paths, as defined in answer, I was still not able to make it work. For anyone else facing same problem as me in future, here's what I did to fix the issues.

I have a shared module and its services are being used in multiple components, so...

tsconfig.json:

{     "compilerOptions": {         ...         "baseUrl": ".", //had to add this too         "paths": {             "@shared/*": ["src/app/modules/shared/*"]         }     } } 

After this, VS Code was able to resolve the import but I still got following error from webpack while compilation.

Module not found: Error: Can't resolve

To fix this I had to add

1. baseUrl of tsconfig in webpack's resolve.modules
2. paths of tsconfig in webpack's resolve.alias

webpack.config.js:

resolve: {   extensions: ['*', '.js', '.ts'],   modules: [     rootDir,     path.join(rootDir, 'node_modules')   ],   alias: {     '@shared': 'src/app/modules/shared'   } }, 

component.ts:

import { FooService } from '@shared/services/foo.service' import { BarService } from '@shared/services/bar.service' import { BazService } from '@shared/services/baz.service' 

To make it even more cleaner, I added an index.d.ts inside services folder and exported all my services from there, like this:

index.d.ts:

export * from './foo.service'; export * from './bar.service'; export * from './baz.service'; 

and now inside any component:

import { FooService, BarService, BazService } from '@shared/services';