How can I change a relative import to absolute in Angular 6?

Question

How can I change a relative import to absolute in Angular 6?

Is there a way to change relative imports to absolute imports in Angular 6?

Here's an example

Instead of using

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

, can we just use environments/environment instead?

angular typescript import

Answer 1

Answer №1

This code snippet pertains to TypeScript specifically, not exclusively Angular. Below is an instance of what you should include in your tsconfig.json file located at the root of your project:

 {
  // Other TS options can go here
  "compilerOptions": {
    // Additional configurations are usually present
    "paths": {
      "@constants/*": ["./app/constants/*"],
      "@components/*": ["./app/components/*"],
      "@directives/*": ["./app/directives/*"],
      "@env/*": ["./environments/*"],
      "@models/*": ["./app/models/*"],
      "@services/*": ["./app/services/*"],
      "@states/*": ["./app/state-management/*"]
    }
  },
  // More configurations may follow
}

By incorporating this setup, you will be capable of utilizing the following syntax in your specific files or components:

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

Answer 2

This code snippet pertains to TypeScript specifically, not exclusively Angular. Below is an instance of what you should include in your tsconfig.json file located at the root of your project:

 {
  // Other TS options can go here
  "compilerOptions": {
    // Additional configurations are usually present
    "paths": {
      "@constants/*": ["./app/constants/*"],
      "@components/*": ["./app/components/*"],
      "@directives/*": ["./app/directives/*"],
      "@env/*": ["./environments/*"],
      "@models/*": ["./app/models/*"],
      "@services/*": ["./app/services/*"],
      "@states/*": ["./app/state-management/*"]
    }
  },
  // More configurations may follow
}

By incorporating this setup, you will be capable of utilizing the following syntax in your specific files or components:

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

How can I change a relative import to absolute in Angular 6?

Answer №1

Similar questions

Compatibility of Ng-bootstrap with Angular 9

When attempting to select dates from the picker options, the array is found to be devoid of any entries

Contrast between employing typeof for a type parameter in a generic function and not using it

Script execution in '<URL>' has been prevented due to sandboxing of the document's frame and the absence of the 'allow-scripts' permission setting

Tips for displaying a specific JSON element when using interpolation in Angular

Issue when transmitting information from Angular to Express

Explore dual functionality options for a button in Ionic 3

Using Typescript and TypeORM together may result in an error stating "Cannot use import statement outside a module"

Incorporate the teachings of removing the nullable object key when its value is anything but 'true'

I'm attempting to retrieve an image from the database to display in the modal, but unfortunately the image isn't appearing as expected within the modal

Guide on configuring the calendar to advance by one year from the chosen date in angular8 utilizing bootstrap datetimepicker

Strategies for obtaining newly updated data with every request and implementing a no-cache approach in Apollo GraphQL and Angular

Navigating a text input field in a NextJS application

AGM MAP | Placing marker within a custom polygon created on the map

`Angular2 Reactively-shaped Form Elements with BehaviorSubject`

I am attempting to incorporate a List View within a Scroll View, but they are simply not cooperating. My goal is to display a collection of items with additional text placed at the bottom

Unable to create the editor within Angular framework

Error encountered while building with Next.js using TypeScript: SyntaxError - Unexpected token 'export' in data export

Can models drive reactive forms by automatically mapping them to FormGroups?

How to access the Parent ViewContainerRef within a projected child component in Angular 5