Can Angular automatically find files for typescript imports?

I've been working with Angular and using TypeScript. When importing a file in Angular, the syntax usually looks something like this:

import { MyService } from '../../../folder/child-folder/my-service.service';

As I progress with my project, I find myself frequently rearranging folders which requires updating the relative path for all imported files. This can become quite tedious especially when dealing with numerous files.

Is there a way to automatically locate my files regardless of where the importing file is located? Similar to how Angular handles its built-in files with imports like:

import { FormGroup } from '@angular/forms';

Answer №1

Make sure to update your tsconfig.json file with the necessary path declarations

"lib": [
    ...
],


"paths": {
  "@myfolder/*": [
    "src/path/to/folder/*"
  ]
}
  

Once you have added the paths, you can now import modules like this

import { MyService } from '@myfolder/child-folder/my-service.service';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Splitting files with Webpack generates dynamic chunk files

Anticipating to only have two distinct chunks named vendors and commons, webpack unexpectedly generates a new chunk file for specific entries with a delimiter. optimization: { splitChunks: { chunks: 'all', cacheGroups: { ...

Guide on assigning a class using routing in Angular 6

My main component has a router-outlet nested within it. <div><router-outlet></router-outlet></div> Here is an excerpt of my routing.module: { path: 'insuranceKindSample', component: InsuranceKindIndexS ...

Displaying data on a webpage using interpolation in HTML

I'm struggling to display user information on my HTML template. I can't seem to figure out what I'm doing wrong. Essentially, I want to retrieve values from the database and dynamically insert them into the main page for display. My issue li ...

Transforming JavaScript code with Liquid inline(s) in Shopify to make it less readable and harder to understand

Today, I discovered that reducing JavaScript in the js.liquid file can be quite challenging. I'm using gulp and typescript for my project: This is a function call from my main TypeScript file that includes inline liquid code: ajaxLoader("{{ &ap ...

Utilizing a string variable as a property name for dynamic typing

I am looking to dynamically create a type with a property name based on specified parameters. Although I can successfully create the object, I am facing challenges when trying to create the actual type. This dynamic type creation is essential for compositi ...

The installation of msal-angular is encountering issues with the peer rxjs version "^6.0.0" from @azure/[emailprotected]

I am attempting to incorporate @azure/msal-angular for Azure B2C authentication with Angular as the front end, but encountering errors during package installation. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ...

How to access data within nested objects using ngFor in Ionic 4

How can I access the data I need from an API when it is nested within multiple objects? I am attempting to retrieve the full_url from the data object, which is nested inside the avatar object. I have already attempted the following: <ion-list> ...

Problem with adding card to customer in Stripe using Angular 2 and Express

I encountered an issue while attempting to add a card to a customer. My Express server, which handles the post request to Stripe, successfully registers a new customer but fails to include credit card information for the new customer. Within my Angular 2 ...

typescript decorator implemented on a class that is nested within another class

Is it possible to decorate a nested property within a class? Let's explore with an example: function log(name: string = 'DecoratedProp') { return function logHandler(target: any, field: any) { // get the key ...

Adding a component dynamically with a link click in Angular: A step-by-step guide

I am encountering an issue with my web application setup. I have a navigation bar, a home page with left and right divs, and a view-associates component. My goal is to dynamically add the view-associates component into the home's right div when a spec ...

What is the correct way to implement fetch in a React/Redux/TS application?

Currently, I am developing an application using React, Redux, and TypeScript. I have encountered an issue with Promises and TypeScript. Can you assist me in type-defining functions/Promises? An API call returns a list of post IDs like [1, 2, ..., 1000]. I ...

Steps for modifying the value of a field within an Angular formGroup

Is there a way to update the value of the "send_diagnostic_data" field in a separate function? private generateForm(): void { this.messageForm = new FormGroup({ message: new FormControl(''), date: new FormControl(new Date()), messag ...

Building an Angular CLI application with Typescript that handles multiple HTTP calls using polling through a timer

I am working with a Django backend and I need to check the status of multiple Celery Tasks () every 3 seconds. For instance, let's say I have 4 task IDs: 3099023 3493494 4309349 5498458 My goal is to make an http.get<...>(backend) call every ...

How can you incorporate a module for typings without including it in the final webpack bundle?

As I venture into the realm of Webpack, I am faced with the challenge of transitioning from TypeScript 1.x to TypeScript 2. In my previous projects, I typically worked with TypeScript in one module using separate files, TSD for typings, and compiling throu ...

You cannot call this expression. The type '{}' does not have any callable signatures. Error TS2349

An issue commonly encountered in TypeScript is error TS2349, indicating that sth has no call signatures. Various situations require different solutions, but when working with React's Context, the most effective solution I've discovered is using ...

Using TypeScript for Geolocation

Consider the code snippet below: pos:number; getPosition() { navigator.geolocation.getCurrentPosition((position) => { this.pos = position.coords.latitude; During debugging, the value of 'this.pos' is undefined, while 'posi ...

Is there a way to prevent the ng2-bootstrap datepicker div from being displayed when the user clicks outside of it?

I'm utilizing an ng2-datepicker to collect a user's date of birth during the registration process. To adhere to the requirement of displaying it as a popup, I have enclosed the datepicker within a div that is displayed when the user clicks a butt ...

Tips for transforming TypeScript Enum properties into their corresponding values and vice versa

Situation Imagine having an enum with string values like this: enum Fruit { Apple = "apple", Orange = "orange", Banana = "banana", Pear = "pear" } Users always input a specific string value ("apple", "banana", "orange", "pear") from a drop-down li ...

Issue with Ionic Framework Typescript: `this` variables cannot be accessed from callback functions

Is it possible for a callback function to access the variables within this? I am currently working with d3.request and ionic 3. I can successfully make a REST call using d3.request, but I am facing difficulty when trying to assign the response to my this. ...

Issue with Typescript: The 'remove' property is not found on the 'EventTarget' type

I keep seeing the error Type error: Property 'remove' is not recognized on type 'EventTarget'. <img onError={function(e) { e.target.remove(); }} src="../me.jpg" alt=""/> ...