Issue with recognizing baseUrl and paths in tsconfig.json in Visual Studio 2017 for Typescript files

Currently, I am utilizing Visual Studio 2017 ASP.NET Core with Angular. However, I am facing an issue where Visual Studio does not seem to recognize the shortcuts when I attempt to set baseUrl/paths.

I am unsure if this is a result of misconfiguration on my end or if Visual Studio 2017 does not offer full support for this feature.

Here is a snippet from my tsconfig.json:

"baseUrl": ".", 
"paths": {
  "@services/*": [ "ClientApp/app/shared/services/*" ] 
}

Furthermore, I have also tried using "app/shared/services/*" for the path.

Upon importing the declaration:

import { MyService } from '@services/my.service';

I encounter the following error message:

Cannot find module '@services/my.service'

angularvisual-studiotypescriptasp.net-corevisual-studio-2017

Answer №1

Looks like there was just a configuration error that needed fixing. Visual Studio was able to recognize and accept the following changes:

"baseUrl": "./ClientApp", 
"paths": {
  "@services/*": [ "app/shared/services/*" ]
}

In addition, make sure to update the resolve section in webpack.config.js so that webpack can properly handle this alias:

resolve: {
    alias: {
        '@services': path.resolve(__dirname, 'ClientApp/app/shared/services')
    },
    extensions: ['.js', '.ts']
},

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

Error: Unable to access _rawValidators property of null object

I'm currently facing an issue with formgroup and formcontrol in Angular. When I run ng serve, it's showing an error in the console. Does anyone have a solution for this? TypeError: Cannot read properties of null (reading '_rawValidators&a ...

javascriptangulartypescript

I encountered a mistake: error TS2554 - I was expecting 1 argument, but none was given. Additionally, I received another error stating that an argument for 'params' was not provided

customer-list.component.ts To load customers, the onLoadCustomers() function in this component calls the getCustomers() method from the customer service. customer.servise.ts The getCustomers() method in the customer service makes a POST request to the A ...

angulartypescriptangular7angular8viewchild

InitAuth0 Auth0 encountering deepPartial error in Next.js with TypeScript setup

Having some trouble setting up auth0 with nextjs using typescript. When I try to initialize Auth0, I encounter an error regarding deep partials, Argument of type '{ clientId: string; clientSecret: string; scope: string; domain: string; redirectUri: st ...

reactjstypescriptnext.jsauth0

Unable to display grid items in React material-ui grid list

export interface FlatsGridProps { flats: IClusterFlats[]; } export const FlatsGrid: React.StatelessComponent<FlatsGridProps> = (props: FlatsGridProps) => { if (props.flats.length === 0) { return (<div> empty </di ...

reactjstypescriptmaterial-ui

Can you define the classification of history in typescript?

Passing the routecomponentprops history to the helper function is now a go. This component is the core. const FinishEmailSignup: React.FunctionComponent<RouteComponentProps> = ({ history }) => { useEffect(( ) => { testEmailAuth(history) ...

reactjstypescript

Guide to selecting HTML components from an Angular service

Within my app.component, I have integrated a component called comp1. The HTML file for comp1.component.html contains buttons defined as follows: <button #myButton (click)='function()'> Temporary </button> <button #myButton2 (click ...

htmlangularrxjs

Using Pipes to Truncate Text in Angular 4 with PrimeNg

Is there a way to limit the output of a data-table to 150 characters? Here is the pipe I am using: transform(value: string, args: string[]): string { const limit = args.length > 0 ? parseInt(args[0], 10) : 20; const trail = args.length > 1 ...

angularprimengprimeng-datatable

Creating a custom decision tree in Angular/JS/TypeScript: A step-by-step guide

My current project involves designing a user interface that enables users to develop a decision tree through drag-and-drop functionality. I am considering utilizing GoJS, as showcased in this sample: GoJS IVR Tree. However, I am facing challenges in figuri ...

javascriptangulartypescriptdecision-tree

Having trouble implementing types with typescript in Vue-toastification for vuejs 3

Having trouble incorporating vue-toast-notification into my vue 3 project. The issue seems to be with vue Augmenting Types. I've tried other solutions without success, encountering the following error: TS2339: Property '$toast' does not exis ...

typescriptvue.jsvuejs3

Error message for invalid form control not displayed when value is assigned to form control in Angular

I am currently working with this editor: <div id="editor"></div> which sets its value to a form control. this.FrmGroup.get("name").setValue(this.quill.root.innerHTML)` <div *ngIf="FrmGroup.get('name').inv ...

angularangular-reactive-formsformgroupsangular-validation

Creating personalized breakpoints in Material UI using TypeScript

When using the createMuiTheme() function, you have the ability to update breakpoint values like this. const theme = createMuiTheme({ breakpoints: { values: { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920, }, }, }) ...

reactjstypescriptmaterial-ui

How can I create a custom validator in Angular 2 that trims the input fields?

As a newcomer to Angular, I am looking to create a custom validator that can trim the input field of a model-driven approach form. However, I have encountered difficulties during implementation. When attempting to set the value using setValue() within th ...

javascriptangularvalidation

Determine the Variable Type by Evaluating the Value of Another Variable

I am looking to implement the following functionality: document("post").insert({ ... } /* TYPE SHOULD BE AUTOMATICALLY DETERMINED BY TYPESCRIPT */ ); The document() function returns an object that includes methods like insert. The returned objec ...

typescript

What is the best way to iterate through an array of objects in Typescript, filter them by a specific property, and then return a Component with custom props

Learning React and Typescript can be challenging, especially when trying to render components with specific data. In my case, I am working with an array of cars and their respective years. The goal is to group these cars by year, but I'm running into ...

reactjstypescript

Enhance your React Typescript High Order Component by incorporating additional properties and implementing them

I am in the process of creating a React HOC with specific requirements: It should take a component as input, modify the hidden property (or add it if necessary), and then return the updated component The rendered component should not display anything whe ...

reactjstypescripthigh-order-component

Ag-grid hack: Changing cell color in a row without utilizing the Cell Styles property within column definitions

[{ "uniqueIdentifier": "12345", "identifier": "UJHU", "latitude": 33.68131385650486, "longitude": -83.36814721580595, "cycle": "1" "speedLimit" ...

angularag-gridag-grid-angular

Angular Typescript subscription value is null even though the template still receives the data

As a newcomer to Angular and Typescript, I've encountered a peculiar issue. When trying to populate a mat-table with values retrieved from a backend API, the data appears empty in my component but suddenly shows up when rendering the template. Here&a ...

ajaxangulartypescriptangular-material

Transforming Angular 4's folder structure for improved architecture simplicity

I am faced with the challenge of organizing files and folders within an Angular 4 project in a way that allows for easy reorganization. Currently, my approach looks like this: ├───core │ │ core.module.ts │ │ index.ts │ │ │ ...

angulartypescriptarchitecturedirectory-structure

Verify the validity of an image URL

I am attempting to create a function in TypeScript that checks the validity of an image source URL. If the URL is valid, I want to display the image using React Native Image. If the URL is invalid, I would like to replace it with a local placeholder imag ...

typescriptreact-native

What is the best approach to managing exceptions consistently across all Angular 2/ Typescript observables?

Throughout the learning process of Angular2, I have noticed that exceptions are often caught right at the point of the call. For example: getHeroes(): Promise<Hero[]> { return this.http.get(this.heroesUrl) .toPromise() ...

angulartypescriptrxjsobservablerxjs5