The `tsc -w` command seems to be failing to detect changes in files for Types

My current task involves configuring my application to monitor any changes in Typescript files and automatically recompile and restart the server. Below is my tsconfig.json configuration:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "rootDir" : "assets/app",
    "outDir": "../public/js/app"
  },
  "files": [
    "./assets/app/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "atom": {
    "rewriteTsconfig": true
  }
}

In the configuration, I have specified the root directory where the .ts files are located and set the output directory for the transpiled code.

Here is how my file structure looks:

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

However, upon attempting to execute the tsc -w command, I encounter the following error message:

error TS6053: File 'assets/app/*.ts' not found.

This implies that the tsconfig.json file may not be correctly parsing my ts files from within the rootDir folder. Despite my efforts to troubleshoot this issue, I haven't been successful. Any suggestions would be greatly appreciated!

Thank you!

typescriptangular

Answer №1

I'm not entirely sure about the atom editor, as they may have unique configurations. However, to my understanding, using exclude with files may not work. Since you are already specifying the rootDir, the files option is unnecessary and should be omitted.

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

Issue with Typescript express application utilizing express-openid-connect wherein cookies are not being retained, resulting in an infinite loop of redirects

For a while now, I've been facing a block with no resolution in sight for this particular issue. Hopefully, someone out there can lend a hand. Background I have a TS express application running on Firebase functions. Additionally, I utilize a custom ...

typescriptfirebasecookiesoktaexpress-openid-connect

Show the textbox automatically when the checkbox is selected, otherwise keep the textbox hidden

Is it possible to display a textbox in javascript when a checkbox is already checked onLoad? And then hide the textbox if the checkbox is not checked onLoad? ...

javascripthtmlcsstypescript

AngularJS: Utilizing services to make API requests and retrieve JSON data

I am struggling to pass a value from an input field on the view using a service. The service is supposed to call my WebAPI2 and then receive a valid JSON as a response. Unfortunately, I keep getting a promise object that I cannot resolve (even with ".then ...

javascripthtmlangularjsjsontypescript

Using Typescript - how to monitor the completion of an asynchronous function without utilizing the await keyword

In the scenario provided, we have a situation where functionThatCannotBeAsync() cannot be async due to system-wise reasons. However, it still needs to call someAsyncStuff(), wait for it to finish, and then return with its result. An attempt has been made ...

typescriptasync-await

Using Angular Toastr in conjunction with Jhipster

In my current Jhipster project using Angular 6, I am struggling to display a notification when a specific event occurs. Although I successfully implemented this in a different test application following the same steps, it doesn't seem to work in my Jh ...

angularjhipsterangular-toastr

Angular 2: Enhancing the table with Bootstrap Modal behind the scenes

I have a roster of students that I can manipulate using CRUD functions. Each student entry has an Edit button <table class="table table-bordered table-striped"> <thead class="studentHeader"> <tr> <td>Roll Number</t ...

javascripttwitter-bootstrapangular

Angular 2 plugin for creating interactive tooltips on SVG elements

Seeking to implement an interactive tooltip on an <svg:circle> element within my Angular 2 project, I opted for using Tooltipster (). Previously, the integration was smooth until I transitioned my project to angular 2. However, I am encountering dif ...

angularsvgtooltiptooltipster

Unexpected absence of error when inferring `never` return type from unidentified function

What causes the discrepancy in outcomes when inferring the never return type in the following TypeScript code (Version 4.3.2 or 4.4.0-nightly)? See comments in the code snippet below: const willThrowException: (message: string) => never = (message) => ...

typescript

Encountering a 'No overload matches this call.' error when using ApexCharts with Typescript and ReactJS

As a newcomer to Typescript, I am gradually familiarizing myself with this powerful tool. After fetching the OHLCV data from coinpaprika and passing it to ApexCharts, I encountered an issue while trying to map the raw data: ERROR in src/routes/Chart.tsx:3 ...

reactjstypescriptapexcharts

Implementing nested resolvers in Angular can be achieved by utilizing the power

One of the components in my project retrieves a category using a resolver. Here's how it's done: ngOnInit() { this.category = this.route.snapshot.data['category']; } It works great and fetches a list of users which make up the cat ...

angularangular-resolver

Angular is detecting an incorrect value in the mask

Recently, I came across the library found at and decided to create a directive utilizing it. My TypeScript code snippet: initForm() { this.form = this.fb.group({ item_number: [this.service.lpu.item_number, Validators.required], ...

angularmask

Implementing Angular2 with conditional loading

One of the requirements for my project is to redirect users to the login page before loading the Angular2 application, without actually loading it. The project is built using angular2-quicksart. After minifying the Angular2 js file: <script> va ...

javascripthtmlangularsystemjs

Angular 5 navigation halted due to guard returning Observable signal

I am managing three routes, with one of them being secured by a guard app.routing-module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LoginComponent } from './modul ...

angularobservableangular5ngrxngrx-store

Steer clear of the mistake of not naming the component selector using kebab-case and including a dash

Is there a way to prevent the error 'The selector of the component should be named kebab-case and include dash ' in Angular2 without changing the selector name? Any potential solutions to this issue?.. ...

angulartslint

Troubleshooting problem with object property conditionality in flow typing

There seems to be a flow issue indicating that string [1] is not an object in the code snippet below: type User = { name: string, age: number, gender?: string, } const user: User = { name: 'xxx', age: 23, ...(props.gender && ...

javascripttypescriptobjectecmascript-6flowtype

What is the best way to enhance a mongoose query using typescript?

I have been attempting to convert this code into TypeScript: https://github.com/kephin/Node_Redis-Caching/blob/master/services/cache.js , but I am struggling to extend the Query object successfully. Currently, I am trying to extend it through declaration ...

typescriptexpressmongoose

IE11 displaying corrupted characters on every JavaScript file

After attempting to add the meta charset in the html header and charset in script tag, I found that neither solution worked. I am truly puzzled by this. On a side note, the system language is set to Chinese, but changing it to English did not solve the i ...

angularinternet-explorer-11

Is there a method to implement retries for inconsistent tests with jest-puppeteer?

Currently, I am struggling with an issue where there is no built-in method to retry flaky tests in Jest. My tech stack includes Jest + TypeScript + Puppeteer. Has anyone else encountered this problem or have any suggestions for possible solutions? I attem ...

typescriptautomated-testsjestjspuppeteere2e-testing

Is there a method available to calculate the quantity of columns in an angular grid?

I need to customize my angular grid to limit the number of columns displayed on screen to a maximum of 5 at a time. Even if there are more than 5 columns available, I want to restrict the user from showing more than 5. Is it possible to achieve this by set ...

javascriptangulartypescriptag-grid

Traversing Abstract Syntax Trees Recursively using TypeScript

Currently in the process of developing a parser that generates an AST and then traversing it through different passes. The simplified AST structure is as follows: type LiteralExpr = { readonly kind: 'literal', readonly value: number, }; type ...

typescriptvisitor-pattern