Issue with TypeScript createProgram due to undefined 'ts.sys' error

I am encountering an issue while trying to utilize the createProgram function. The error message states that ts.sys is undefined when running the following code:

try {
    createProgram(Utils.getFileNames(), {
        lib: ['lib.es6.d.ts']
        // target: ScriptTarget.ES5,
        // module: ModuleKind.CommonJS
    });
} catch (ex) {
    debugger;
}

I have attempted both ways, with and without the commented part as well as including the lib option. Below is the stack trace provided:

createCompilerHost@http://localhost:4200/vendor.js:203082:13
createProgram@http://localhost:4200/vendor.js:203374:24
./src/app/docs/generator.ts/Generator.generate@http://localhost:4200/main.js:1855:13
GettingStartedComponent@http://localhost:4200/main.js:3352:9
createClass@http://localhost:4200/vendor.js:42397:20
createDirectiveInstance@http://localhost:4200/vendor.js:42284:20
createViewNodes@http://localhost:4200/vendor.js:43504:36
createRootView@http://localhost:4200/vendor.js:43418:5
callWithDebugContext@http://localhost:4200/vendor.js:44449:22
debugCreateRootView@http://localhost:4200/vendor.js:43936:12
./node_modules/@angular/core/fesm5/core.js/</ComponentFactory_.prototype.create@http://localhost:4200/vendor.js:41764:20
./node_modules/@angular/core/fesm5/core.js/</ComponentFactoryBoundToModule.prototype.create@http://localhost:4200/vendor.js:36416:16
./node_modules/@angular/core/fesm5/core.js/</ViewContainerRef_.prototype.createComponent@http://localhost:4200/vendor.js:41874:28

Highlighted sections of interest include:

createCompilerHost@http://localhost:4200/vendor.js:203082:13
createProgram@http://localhost:4200/vendor.js:203374:24

The code example I am using can be found on TypeScript's wiki page here: https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#using-the-type-checker

I have researched this issue but could not find a solution. Could it be a missing package or configuration problem? Any assistance would be greatly appreciated...

Here are my imports:

import {
    Node,
    createProgram,
    forEachChild,
    isClassDeclaration,
    isModuleDeclaration,
    TypeChecker,
    ScriptTarget,
    ModuleKind
} from 'typescript';

Answer №1

To utilize the features of the TypeScript compiler library, a compiler host must be implemented to handle tasks like file operations. If a compiler host is not provided to createProgram, the library will attempt to create a default host using the underlying ts.sys object. However, keep in mind that ts.sys is only automatically generated in Node.js-like environments. Therefore, when using the TypeScript compiler library in a non-Node.js environment, you will either need to pass your own compiler host to createProgram (you only need to implement the methods you actually use) or create ts.sys manually (although this is considered to be less recommended).

If you encounter a misleading error message while working with TypeScript, don't hesitate to report it as an issue.

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

Typescript is throwing an error stating that utilizing 'undefined' as an index type is invalid

When working with TypeScript and React, I pass xs, sm, md, lg as props to the component. Each size corresponds to a specific pixel value (14px, 16px, 18px, 24px) that is then passed to an Icon component. The errors mentioned in point (1) occur at the line ...

What are the essential requirements for an Angular application to function properly with minimal dependencies?

If a new developer wants to begin learning Angular from scratch, what are the essential npm packages that they need to install in order to start building an Angular application with minimal dependencies? ...

Contrasting `Function` with `(...args: any[]) => any`

Can you explain the difference between Function and (...args: any[]) => any? I recently discovered that Function cannot be assigned to (...args: any[]) => any. Why is that so puzzling? declare let foo: Function; declare let bar: (...args: an ...

You cannot use objects as valid children in React layout components

I encountered an issue with my layout: Unhandled Runtime Error Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. The code in my DashboardLayout file (dashboardLa ...

Transferring dynamic data to an Angular component's controller

Here's what I currently have: <div *ngFor="let career of careers"> <label>{{career.name}}</label> <input type="checkbox" attr.id="{{career.id}}" (change)="doSomethingWithId($event.target)" </div> This is the TypeSc ...

Issue: Nest is unable to export a component/module that is not included in the DatabaseModule module that is currently being processed

I am currently working on a simple app that involves implementing CRUD functionality on a PostgreSQL database using express. However, when I try to run my program, I encounter the following error message: Error: Nest cannot export component/module that is ...

Implementing React custom component with conditional typing

My goal is to enable other developers to set a click handler for a button only if the button's type is set to button. Users can only set the type to either button or submit. I want to restrict developers from setting the onClick property on the comp ...

What is the best way to ensure every component in Angular 2 has access to a custom pipe?

I've come up with a unique idea to create a custom rainbowize pipe that wraps each letter in a span with a random color of the rainbow as the css color property. My goal is to implement this custom pipe across all components in my app without having t ...

Is there a way to reset static data in a TypeScript subclass? (or alternative method for managing global data)

I have a particular set of static data that I would like to access through an API using basic logic. Specifically, this data pertains to metadata about Java classes. My approach involved incorporating the API into a few static methods within a class, alon ...

Enhance React component props for a styled component element using TypeScript

Looking to enhance the properties of a React component in TypeScript to include standard HTML button attributes along with specific React features such as ref. My research suggests that React.HTMLProps is the ideal type for this purpose (since React.HTMLA ...

Ways to dynamically display or hide content in Angular 7

>when an English button is clicked, its corresponding div should be shown. If another button is clicked, its div should also show without closing the previous one. I want each div to close only when its respective button is clicked again. >Please not ...

Using React-Bootstrap with TypeScript in your project

I'm currently working on creating a navigation bar using react-bootstrap. I've already installed the node-module as follows: "@types/react-bootstrap": "^0.32.11",. However, when I try to use it in my hello.tsx component, I encounter a compile err ...

Issue with saving date values accurately in Nestjs/Prisma

After logging the response body before saving it to the database, I noticed that the shape is correct. Here's what it looks like: //console.log response body CreateOpenHourDto { day: 'WEDNESDAY', startTime: 1663858800000, endTime: 16638786 ...

Combining Vue with Typescript and rollup for a powerful development stack

Currently, I am in the process of bundling a Vue component library using TypeScript and vue-property-decorator. The library consists of multiple Vue components and a plugin class imported from a separate file: import FormularioForm from '@/FormularioF ...

The ValidationPipe does not function properly when utilizing app.useGlobalPipes

Hello! I'm looking to implement the ValidationPipe globally using useGlobalPipes. Currently, my code looks like this: import 'dotenv/config'; import {NestFactory} from '@nestjs/core'; import {ValidationPipe} from '@nestjs/com ...

Create the HTTP POST request body using an object in readiness for submission

When sending the body of an http post request in Angular, I typically use the following approach: let requestBody: String = ""; //dataObject is the object containing form values to send for (let key in dataObject) { if (dataObject[key]) { ...

Guide to Angular Interface Styling - Ambiguous Suggestions

After reviewing the Angular style guide for interfaces, I find two recommendations particularly perplexing: The suggestion to use a class instead of an interface for services and declarables (components, directives, and pipes) leaves me puzzled. Similarl ...

Instructions for adding a name to a string based on certain conditions

I am attempting to prepend a company name to a card number using the code provided. The challenge I am facing is incorporating the specific rules for each company as conditions for an if statement. Although I acknowledge that my current approach with the ...

How can I transfer data between methods within Angular?

Help Needed: I have a service file with two methods, each having its own API. I want to call the getData method within the deleteData method. Can anyone guide me on how to achieve this? .service.file getData(): Promise<PagedResult<Sites>> { ...

Creating dynamic components in ReactJS allows for versatile and customizable user interfaces. By passing

Within the DataGridCell component, I am trying to implement a feature that allows me to specify which component should be used to render the content of the cell. Additionally, I need to pass props into this component. Below is my simplified attempt at achi ...