The paths configuration in tsconfig.json is not functioning as anticipated

I've been encountering a module not found error while trying to work with jasmine-ts. To troubleshoot, I decided to use tsc and inspect my folder structure:

\src\app\...
\src\tests\...

To address this issue, I created a tsconfig.json at the 'tests' level as shown below:

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "../", 
        "paths": {
            "@app/*": [
                "app/*"
            ] 
        }
    }
}

Even after importing a module from the app directory in my '*.test.ts' file, I still receive a module not found error:

Cannot find module '@app/core/data/my-module'

I attempted to run the following command:

tsc --traceResolution test1.test.ts

which produced the following output:

test1.test.ts:2:23 - error TS2307: Cannot find module '@app/core/data/my-module'. 

2 import { Field } from '@app/core/data/my-module'
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~

Answer №1

Have you attempted this method?

In your tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@pages/*": ["app/pages/*"],
      "@environment": ["environments/environment"]
    }
  },
}

When importing:

import { LoginComponent } from '@pages/login/login.component';

import { environment } from '@environment';

This solution has been successful for me.

Answer №2

Consider

"baseUrl": "src"

as an alternative to

"baseUrl": "../",  

within your tsconfig.json file

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

Guide on merging non-modular JavaScript files into a single file with webpack

I am trying to bundle a non-modular JS file that uses jQuery and registers a method on $.fn. This JS must be placed behind jQuery after bundling. Here is an example of the structure of this JS file: (function($){ $.fn.splitPane = ... }(JQuery) If y ...

Controller property not being updated by directive

I have developed a custom directive to identify when the enter key is pressed within a text box. Here's the implementation of the directive: import { BookmarkService } from "../services/bookmarkService"; import { qlik, QlikBookmarkInfo } from "../qli ...

An issue arises when using an Observable in the model while employing Angular's dynamic component loading

I have been utilizing a dynamic component for quite some time now. However, I am now interested in incorporating an "Observable" into its model to enable triggering changes from external sources. To achieve this, I have created a service (which lies outsid ...

Disabling `no-dupe-keys` in ESLint does not seem to be effective

Currently, I am working on a project where I have incorporated Typescript and ESLint. However, I have encountered an issue with the error message stating: An object literal cannot have multiple properties with the same name. I am looking to disable this s ...

Sign up to receive updates on PageSize and PageIndex settings for MatTable in Angular Material

Currently, I am incorporating an angular material Table and paginator into my project. The challenge I am facing is how to send the pageSize and pageIndex values to the backend in order to handle paging on that side. Our application deals with a large am ...

The ValidationSchema Type in ObjectSchema Seems to Be Failing

yup 0.30.0 @types/yup 0.29.14 Struggling to create a reusable type definition for a Yup validationSchema with ObjectSchema resulting in an error. Attempting to follow an example from the Yup documentation provided at: https://github.com/jquense/yup#ensur ...

Is it possible to utilize the OnBlur prop based on a certain condition?

To display a component when the input is focused, follow the steps below: Click here for not focused state When you click on the text input, the component should appear like this: Click here for focused state The code snippet provided works correctly. ...

after ajax post, enhance original object by merging with the latest server values

After making a call to the server and successfully saving some data, I need to update the JSON array object that I have with new values. Here is a snippet of my code: [ { "id": 1, "uuid": "ce54acea-db20-4716-bceb-2f3deb1b2b86", "name": null, ...

retrieve object from s3 using angular and open it as a pdf

I'm attempting to access a file from an s3 bucket using Angular and display it as a PDF. I have a node service set up to retrieve the object, which I then call from Angular. However, when I try to open the PDF in Angular, it appears as a blank (white) ...

`ng build`: transferring scripts to a subdirectory

When running the command ng build, it exports files to the dist folder like this: index.html main.bundle.js styles.bundle.js ... I would like the scripts to be in a subfolder: *index.html scripts/main.bundle.js scripts/styles.bundle.js ...* ...

Conceal a division based on its numerical position

I'm having trouble figuring out how to hide multiple divs based on an index that I receive. The code snippet below hides only the first div with the id "medicalCard", but there could be more than one div with this id. document.getElementById("medical ...

"Error: imports are undefined" in the template for HTML5 boilerplate

After setting up an HTML5 Boilerplate project in WebStorm, I navigate to the localhost:8080/myproject/src URL to run it. Within the src folder, there is a js directory structured like this: libraries models place.model.ts place.model.js addr ...

The absence of color gradations in the TypeScript definition of MUI5 createTheme is worth noting

Seeking to personalize my theme colors in MUI5 using TypeScript, I am utilizing the createTheme function. This function requires a palette entry in its argument object, which TypeScript specifies should be of type PaletteOptions: https://i.stack.imgur.com ...

Determine if lazy loading is functioning properly through programming

When it comes to Angular, ensuring lazy-loading remains intact can be tricky. Simply importing something from a lazy-loaded module into the app module can result in eager loading. That's why I make it a point to check for such errors during PR reviews ...

The GET API is functioning properly on Google Chrome but is experiencing issues on Internet Explorer 11

Upon launching my application, I encountered an issue with the v1/validsColumns endpoint call. It seems to be functioning properly in Chrome, but I am getting a 400 error in IE11. In IE v1/validCopyColumns?category=RFQ&columns=["ACTION_STATUS","ACTIO ...

Assuming control value accessor - redirecting attention

import { Component, Input, forwardRef, OnChanges } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'formatted-currency-input', templateUrl: '../v ...

The Angular project failed to run properly following the ng build command

Just started working with Angularjs 2 and encountered an issue after running ng build. The compiled files were placed in the dist folder, but when I checked the index.html file within that folder, all the scripts had missing references even though they w ...

Navigating to a Different Page in Angular 7

After logging in on my login page, the dashboard component appears below the login page instead of redirecting as a new page. How can I achieve this in Angular 7? Any assistance would be greatly appreciated. Thank you! app.component.ts import { Component ...

Express is having trouble rendering the static index file

I am currently working on an Angular application, where my goal is to serve the build files from the Angular application using the dist directory in my express server. In order to achieve this, I am copying the files generated by ng build and pasting them ...

Improprove the types generated from GraphQL responses

I am facing a major challenge with the types while using GraphQL. My intention is to send a request and store the result in a React state with a well-defined type. However, I want to avoid declaring it as const [animals, setAnimals] = useState<AnimalsLi ...