Specify the route in tsconfig.app.json for your Angular project

Using the angular CLI, the project has been created with the following folder structure:

https://i.sstatic.net/lqGMo.png

The aim is to establish a path to a bar folder in tsconfig.app.json and import Car to Garage.

The tsconfig.app.json file:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths" : {
      "@bar" : ["foo/bar"]
    },
    ...
  },
  ...
}

The Garage.ts file:

import { Car } from "@bar/Car";
export class Garage {}

An error is encountered in garage.ts:

Cannot find module '@bar/car'.

angulartypescriptimportangular-clitsconfig

Answer №1

To properly set up the paths configuration, make sure it looks like this:

   "paths" : {
      "@bar/*" : [
          "foo/bar/*"
      ]
    },

If you want more detailed information, check out:

  • Configuring TypeScript compiler

Answer №2

Remember to always include the baseUrl before specifying the paths. It can save you hours of troubleshooting like it did for me.

"baseUrl": "./",
"paths": {
  ...
}

Answer №3

I believe this solution could be effective 

    {
  "extends": "../tsconfig.json",
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths" : {
      "@bar" : ["foo/bar"],
      "@environment/*": ["environments/*"],
        "@shared/*": ["app/_shared/*"],
        "@helpers/*": ["helpers/*"]
       //multiple paths can be defined within this section 
    },
    ...
  },
  ...
}

It seems that the question is quite similar to a duplicate post on Stack Overflow

Answer №4

For addressing issues in VS code, simply press CMD + SHIFT + P and then enter "reload" or "Reload Project" to resolve the complaints. In the case of webstorm, you can stop the complaints by invalidating caches. Go to File, select Invalidate caches, then choose Invalidate and restart.

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

Mocking a common function in a shared service using Typescript and Jest

I have a service that is utilized with NestJS, although the issue at hand is not specific to NestJS. Nonetheless, testing in NestJS is involved, and I use it to create the service for testing purposes. This service is responsible for making multiple calls ...

typescriptunit-testingjestjsnestjs

How can I prevent buttons from being created using ngFor in Angular?

I need help with creating an HTML table that includes a cell with a button and a dropdown generated using ngFor. How can I disable the buttons (generated via ngFor) if no value is selected from the dropdown? Here's what I have tried so far: In my App ...

javascriptangulartypescript

What steps should I take to plan a collaborative code-sharing project?

As I develop various applications utilizing a core framework of my own creation, I am looking for a way to easily manage updates across all these applications. I have structured the code by creating a GitHub project where the main branch consists of the co ...

typescriptgitmoduleversion-control

What is the significance of requiring a specific string in a Typescript Record when it is combined with a primitive type in a union?

I am facing an issue with the following data type: type ErrorMessages = Record<number | 'default', string>; When I declare a variable like const text: ErrorMessages = {403: 'forbidden'}, Typescript points out that default is miss ...

typescripttypesoptional-chaining

Records of docker-related errors detected in the logs

I am looking to release the Angular application with GitLab CI/CD pipeline on Azure. I have set up the GitLab pipeline as shown below: Upon deployment, I encountered errors in the logs which are displayed below: Seeking assistance to resolve this issue ...

angularazuregitlab-ci

Developing a bespoke React Typescript button with a custom design and implementing an onClick event function

Currently, I am in the process of developing a custom button component for a React Typescript project utilizing React Hooks and Styled components. // Button.tsx import React, { MouseEvent } from "react"; import styled from "styled-components"; export int ...

reactjstypescriptreact-hooks

What is the best way to eliminate the content of an element using javascript/typescript?

The progress bar I'm working with looks like this: <progress class="progress is-small" value="20" max="100">20%</progress> My goal is to use javascript to remove value="20", resulting in: <progre ...

javascripttypescript

Employing a boolean constant to verify if a parameter has been specified

Struggling with TypeScript version 2.8.3, I'm confused as to why the code below is failing to recognize that params is defined inside the if block. const testFunction = (params?: string) => { const paramIsDefined = typeof params !== 'undefi ...

typescript

Utilizing ngx-logger Dependency in Angular 6 for Efficient Unit Testing

Have you ever attempted to test classes in Angular that rely on ngx-logger as a dependency? I am looking for guidance or examples of how this can be achieved using testing frameworks such as Jasmine. It seems there are limited resources available on mock ...

angulartypescriptjasmine

Karma's connection was lost due to a lack of communication within 10000 milliseconds

The Karma test suite is encountering issues with the following message: Disconnected, because no message in 10000 ms. The tests are not running properly. "@angular/core": "7.1.3", "jasmine-core": "3.3.0", "karma-jasmine": "1.1.2", The failure seems t ...

angulartypescriptjasminekarma-runnertypescript-namespace

How to specify the return type of a promise from an observer in Angular 6

Typically, I prefer using observables. However, in order to avoid 'callback hell' in this particular scenario, I decided to use toPromise(). Unfortunately, I encountered a lint error message when trying to define the return type: The 'Obj ...

angulartypescripthttppromise

Changes are not being detected in new Angular 2 files

Currently, I am enhancing an Angular 2 project by incorporating new modules. However, the changes I made in these files are not being recognized within the project. I have attempted to research how change detection functions in Angular 2, but have not bee ...

javascriptangular

Creating a Form in Angular That Dynamically Adds Form Controls

In order to achieve my objective of incorporating a search form with multiple filters on any given page, I aim to implement the following structure on my HomePageComponent: <app-search-form> <app-searchbox></app-searchbox> </app-sear ...

angulartypescriptangular-reactive-formsangular18angular-dynamic-forms

A backend glitch is exposed by NextJS in the web application

Currently, I am utilizing Strapi for my backend and have created a small script to handle authorization for specific parts of the API. Additionally, I made a slight modification to the controller. 'use strict'; const { sanitizeEntity } = require( ...

javascripttypescriptnext.jsfrontendstrapi

There was an error linking the module "electron_common_features" which caused the Electron react test to fail

I recently developed a React Electron application using the electron-react-boilerplate template. I also added the @electron/remote package and made changes to the test case. However, upon running the command npm test, an error message stating No such modul ...

reactjstypescripttestingelectron

There was an issue with the program: "ERROR TypeError: When trying to call a method from the

Hey everyone, I'm attempting to retrieve data from an API using a specific service and then log the data in the console. However, I'm encountering an error with the component and service I'm using that reads: ERROR TypeError: Cannot read pro ...

angular

Monitor constantly to determine if an element is within the visible portion of the screen

For a thorough understanding of my query, I feel the need to delve deeper. While I am well-versed in solving this issue with vanilla Javascript that is compatible with typescript, my struggle lies in figuring out how to invoke this function throughout th ...

javascriptangulartypescript

Using static typing in Visual Studio for Angular HTML

Is there a tool that can validate HTML and provide intellisense similar to TypeScript? I'm looking for something that can detect errors when using non-existent directives or undeclared scope properties, similar to how TypeScript handles compilation er ...

htmlangularjsvisual-studiotypescript

Angular and Bootstrap project with an advanced dropdown menu featuring multiple levels

Looking to create a multi-level drop-down menu using TypeScript without relying on jQuery? Bootstrap CSS framework may not have exactly what you need. https://i.sstatic.net/iruev.png Wondering how to implement a multi-level dropdown in your Angular proje ...

htmlcssangulartypescriptbootstrap-4

Typescript threw an error stating "Cannot access properties of an undefined object" in the React-Redux-axios

As a backend developer, I am not very familiar with frontend development. However, for my solo project, I am attempting to create some frontend functionalities including user login right after setting the password. Below is the code snippet from UserSlice. ...

reactjstypescriptaxiosreact-reduxredux-toolkit