Having trouble getting tsserver-plugins to function properly in either Atom or VSC

My team and I are on a mission to enhance our Angular 2 templates with code completion, similar to what is showcased in this gif.

To achieve this goal, we require:

tsserver-plugins

coupled with

tslint-language-service and @angular/language-service

We attempted the following steps:

npm install tsserver-plugins -g
npm install angelozerr/tslint-language-service --save-dev
npm install @angular/language-service --save-dev

and included the following snippet in our tsconfig.json under compilerOptions:

"plugins": [
    { "name": "tslint-language-service"}, 
    { "name": "@angular/language-service"}
]

I faced challenges configuring Atom's TypeScript plugin to utilize tsserver-plugins instead of tsserver, so I resorted to renaming

/usr/local/bin/tsserver to

/usr/local/bin/_tsserver

and

/usr/local/bin/tsserver-plugins to

/usr/local/bin/tsserver

Although I anticipated success, it did not work as expected.

Subsequently, I restarted Atom – without any changes. I then rebooted my computer – still no progress.

As a last resort, I installed typescript@next (2.3.0.dev...) both locally and globally, and repeated the procedures.

My colleague also attempted implementation using Visual Studio Code, which unfortunately yielded no results. Where could we be going wrong?

Answer №1

Initially, tsserver-plugins requires tsserver and is compatible with any version of TypeScript. It should be noted that this is not a fork of tsserver.

tsserver-plugins utilizes ts.createLanguageService to incorporate plugins specified in your tsconfig.json.

To achieve this, the bin/tsserver-plugins script performs the following steps:

  • Loads the content of typescript/lib/tsserver.js as a string
  • Combines the before-tsserver.js script with typescript/lib/tsserver.js
  • Executes the merged result as a node module

There are two approaches to obtaining typescript/lib/tsserver.js:

  • If tsserver-plugins is installed in the same node_modules directory as typescript, it can access typescript/lib/tsserver.js using
    require(typescript/lib/tsserver.js)
  • If tsserver-plugins is located in a different node_modules folder than typescript, you must specify the TypeScript path using the --typescriptDir parameter when calling tsserver-plugins

For example, if your setup looks like this:

  • C:/dir1/node_modules/tsserver-plugins
  • C:/dir2/node_modules/typescript

You would run:

node C:/dir1/node_modules/tsserver-plugins/bin/tsserver-plugins --typescriptDir C:/dir2/node_modules/typescript

Lastly, both tslint-language-service and @angular/language-service must reside in the same node_modules folder as TypeScript.

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 the property of an undefined variable in Angular 4

Here is what I currently have in my code: <p *ngIf="model.something.satisfy"> Yes </p> <p *ngIf="!model.something.satisfy"> {{model.something.comments}} </p> The issue arises in the second line with the error message "Type ...

Is time-based revalidation in NextJS factored into Vercel's build execution time?

Currently overseeing the staging environment of a substantial project comprising over 50 dynamic pages. These pages undergo time-based revalidation every 5 minutes on Vercel's complimentary tier. In addition, I am tasked with importing data for numer ...

When utilizing useRef and useCallback in React, the output is visible in the console log but does not appear on the page

When working with API data, it's important to remember that the extraction process is asynchronous and the state may not be available at certain times. To handle this situation, we can utilize useCallback. However, even after successfully logging the ...

Directive for multi-field validation in Angular 4 Template-Forms with ngModelGroup

Can someone assist me in validating the match between a user's new password and confirm password using an Angular Directive? Despite correctly identifying a mis-match, the error message is not displayed: Template Form <form> <md-input- ...

What causes Gun.js to generate duplicate messages within a ReactJs environment?

I need assistance with my React application where gun.js is implemented. The issue I am facing is that messages are being duplicated on every render and update. Can someone please review my code and help me figure out what's wrong? Here is the code s ...

Using Angular 5 with Typescript to generate and return an array of freshly instantiated typed objects

My backend service provides me with "moments," and I have two functions to handle this data. One is a get() method that returns a single object, and the other is a search() method that returns an array of objects. moment.service.ts The get method success ...

What is a more efficient method for incorporating optional values into an object?

Currently, I am utilizing the optional addition feature in this way: ...(!!providerId && { providerId }), ...(!!practiceId && { practiceId }), Is there a more elegant shorthand method to replace this logic, such as: yield createRemark ...

Dynamic Field Validation in Angular 6: Ensuring Data Integrity for Dynamic Input Fields

After successfully implementing validation for one field in my reactive form, I encountered an issue with validating dynamically added input fields. My goal is to make both input fields required for every row. The challenge seems to be accessing the forma ...

Angular's GET HTTP request has resulted in a 500 error message, specifically the Internal Server Error

Attempting to send a GET request to the server where only authenticated users can access a specific route ("/user") after logging in. However, even after a successful login, users are unable to gain access to the "/user" route. A middleware function named ...

Guide on initiating document-wide events using Jasmine tests in Angular 2/4

As stated in the Angular Testing guidelines, triggering events from tests requires using the triggerEventHandler() method on the debug element. This method accepts the event name and the object. It is effective when adding events with HostListener, such as ...

Subscribing to ngrx store triggers multiple emissions

Currently, I have an app with a ngrx store set up. I am experiencing an issue where, upon clicking a button, the function that fetches data from the store returns multiple copies of the data. Upon subsequent clicks, the number of returned copies grows expo ...

The dropdown for selecting months and years is not appearing on Angular 13's ngbdatepicker

Currently, I am developing a project in Angular 13 with Bootstrap 4. I am trying to implement a datePicker using ngbDatepicker, but unfortunately, the datePicker is not displaying the dropdowns for selecting months and years at the top. Here is the code sn ...

Is there a way to use a single url in Angular for all routing purposes

My app's main page is accessed through this url: http://localhost:4200/ Every time the user clicks on a next button, a new screen is loaded with a different url pattern, examples of which are shown below: http://localhost:4200/screen/static/text/1/0 ...

Micro Frontend: Implementing a Pubsub System for Scalable Front-End Architecture

Currently, I am developing a large-scale application using the innovative micro front end architecture. The application is split into 5 Micro Apps: (micro-app-A (developed in Vue), micro-app-B (built with Vue), micro-app-C (using Angular), micro-app-D (cre ...

Issue with Angular Material: Default selection not being applied in mat-select component

When I have a mat-select with options defined as objects in an array, I am facing an issue where the default selected value is not being set when the page renders. In my TypeScript file, I have: public options2 = [ {"id": 1, "name": "a"}, {"id": 2 ...

The export from chart.js does not include a member named 'ChartDataSets'. Perhaps you were referring to 'ChartDataset'? ts(2724)

Encountered an error message when trying to import ChartDataSets in line-chart.component.ts 'chart.js' does not have a member named 'ChartDataSets'. Perhaps you meant 'ChartDataset'? https://i.sstatic.net/9eu8N.png Uncertain ...

Webpack does not support d3-tip in its current configuration

I'm having some trouble getting d3-tip to work with webpack while using TypeScript. Whenever I try to trigger mouseover events, I get an error saying "Uncaught TypeError: Cannot read property 'target' of null". This issue arises because th ...

Is Angular equipped with named routes or states similar to UIRouter?

When working with AngularJS and ui-router, we define a state like this: .state('myState', { url: 'some-user-friendly-url' ... }) This allows us to easily specify the URL and name of the state. It simplifies navigation by letting ...

Having trouble sending correct true/false values for selected radio buttons on an Angular5 table, often requiring users to click them twice to submit the appropriate values

My goal is to assign true or false values to selected radio buttons in each row and then form an object for submission. To distinguish between the radio button values in each row, I have used {{k}}+{{sizeobj.rbSelected}} as the value which is causing issue ...