How to convert relative import to absolute in angular 6?

Question

How to convert relative import to absolute import in angular 6?

For example

make environments/environment instead of

 ../../../../environments/environment

Answer 1

This is actually for TypeScript, not necessarily Angular. Here is an example of what you need to add to your tsconfig.json file in the root of your project:

{
  // Other TS options here
  "compilerOptions": {
    // more stuff is usually here
    "paths": {
      "@constants/*": ["./app/constants/*"],
      "@components/*": ["./app/components/*"],
      "@directives/*": ["./app/directives/*"],
      "@env/*": ["./environments/*"],
      "@models/*": ["./app/models/*"],
      "@services/*": ["./app/services/*"],
      "@states/*": ["./app/state-management/*"]
    }
  },
  // ...other stuff can be here too
}

Then, you will be able to do this within your specific files/components:

import { LoggerService } from '@services/logger/logger.service';