The folder creation in the 'outDir' directory by TSC continues to grow

Hello!

Currently, I am engaged in a small TypeScript project where I need to utilize two separate tsconfig.json files, both of which inherit from my main tsconfig.base.json file.

Unfortunately, I encountered an issue with the compiler creating unnecessary subfolders within the designated outDir, causing me some frustration.

Presented below is the content of my core tsconfig.base.json:

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "resolveJsonModule": true,
      "lib": ["es6", "dom"],
      "esModuleInterop": true,
    },
    "exclude": [
      "node_modules"
    ]
}

Additionally, here is a snippet from the derived tsconfig.src.json:

{
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
        "rootDirs": ["./src/ts", "."],
        "outDir": "./src/js/"
    },
    "exclude": [
        "page/**/*.ts",
        "tsconfig.page.json"
    ],
    "include": [
        "src/**/*.ts",
        "service_account.json"
    ],
}

The current structure of my project appears as follows:

.
+-- node_modules/
+-- src/
|    +-- js/ (desired compilation destination for TypeScript files)
|    +-- ts/ (location of all TypeScript files)
+-- tsconfig.base.json
+-- tsconfig.src.json
+-- service_account.json

When executing the build:backend script (

"build:backend": "tsc -p ./tsconfig.source.json"
), the compiler generates unwanted subfolders, resulting in the following project layout:

.
+-- node_modules/
+-- src/
|    +-- js/ 
|        +-- src/
|            +-- ts/ (unexpected location of compiled JavaScript files now)
|    +-- ts/ 
+-- tsconfig.base.json
+-- tsconfig.src.json
+-- service_account.json

If you have any insights on what could be causing this problem, your help would be greatly appreciated! Thank you in advance for your assistance!

Answer №1

Make sure to organize all your inputs in one folder and all the outputs in a separate folder that is not within the inputs directory.

Here's an example solution:

{
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
        "rootDir": "/src/ts",
        "outDir": "./src/js"
    },
    "exclude": [
        "page/**/*.ts",
        "tsconfig.page.json"
    ]
}

Also, don't forget to move the service_account.json file into the src/ts directory as well.

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

Exploring the Concept of Dependency Injection in Angular 2

Below is a code snippet showcasing Angular 2/Typescript integration: @Component({ ... : ... providers: [MyService] }) export class MyComponent{ constructor(private _myService : MyService){ } someFunction(){ this._mySer ...

Pass the JSX data as JSON from the Express backend and showcase it as a component in the React frontend

I am currently developing a basic react front-end paired with an Express backend. Is it possible for me to have express send JSX data as JSON so that I can fetch it in react and utilize it as a component? Right now, I am sending JSON data and successfully ...

Classify JavaScript Array Elements based on their Value

Organize array items in JavaScript based on their values If you have a JSON object similar to the following: [ { prNumber: 20000401, text: 'foo' }, { prNumber: 20000402, text: 'bar' }, { prNumber: 2000040 ...

Troubleshooting problem with mapping @RequestBody in Spring - uncovering unassigned values

Using a Spring Controller for converting JSON to Java using the @RequestBody annotation. Currently debugging the code and suspect that the JSON is not being mapped correctly to the entity. Curious to see what the non-mapped JSON looks like from Java's ...

Using the AppDispatch type in Redux async thunk: A comprehensive guide

While working with my Redux async thunks, I encountered a situation where I needed to utilize the AppDispatch type as outlined in this resource: https://redux.js.org/recipes/usage-with-typescript Following the guidelines provided here: https://redux.js.or ...

Retrieve data from server using jQuery and parse it as JSON for

Having trouble displaying the returned array - when I log it in the console, it appears like this: { "text":"{\"error\":false,\"msg\":\"found in search\"}", "data":{ "notifications":[ ] } } This is ...

Encountered an error trying to access properties that are undefined while working with Ionic Angular, specifically having trouble reading the 'update

As someone who is new to building ionic angular applications (coming from a PHP background), I am currently facing an issue. I have a page with the following code: export class LicencesTabPage implements OnInit { public licencesData: any[] | void; co ...

Retrieve the initial image from every JSON data point

Searching for a way to fetch the first image from each post in the JSON object? Check out the Tumblr API Documentation Currently, the provided code displays content from only the first post. The goal is to display the first image from all posts. $.ajax({ ...

Encountering NaN in the DOM while attempting to interpolate values from an array using ngFor

I am working with Angular 2 and TypeScript, but I am encountering NaN in the option tag. In my app.component.ts file: export class AppComponent { rooms = { type: [ 'Study room', 'Hall', 'Sports hall', ...

Maintaining the order of subscribers during asynchronous operations can be achieved by implementing proper synchronization

In my Angular setup, there is a component that tracks changes in its route parameters. Whenever the params change, it extracts the ID and triggers a function to fetch the corresponding record using a promise. Once the promise resolves, the component update ...

What is the best method for encoding non-ASCII characters in JSON.stringify as ASCII-safe escaped characters (uXXXX) without the need for additional post-processing?

In order to send characters like ü to the server as unicode characters but in an ASCII-safe string format, I need them to be represented as \u00fc with 6 characters, rather than displaying the character itself. However, no matter what I try, after us ...

What impact does introducing a constraint to a generic type have on the inference process?

Let's take a look at this scenario: function identity<T>(arr: T[]) { return arr } identity(["a", "b"]) In the above code snippet, the generic type T is inferred as string, which seems logical. However, when we introduce a ...

Using ngFor results in duplicate instances of ng-template

I'm facing a challenge with the ngFor directive and I'm struggling to find a solution: <ng-container *ngIf="user.images.length > 0"> <div *ngFor="let image of images"> <img *ngIf="i ...

Converting JSON objects into TypeScript classes: A step-by-step guide

My challenge lies in converting Django responses into Angular's User array. This conversion is necessary due to variations in variable names (first_name vs firstName) and implementing specific logic within the Angular User constructor. In simple term ...

Troubleshooting Azure typescript function: Entry point for function cannot be determined

project structure: <root-directory> ├── README.md ├── dist ├── bin ├── dependencies ├── host.json ├── local.settings.json ├── node_modules ├── package-lock.json ├── package.json ├── sealwork ...

Major processing glitch detected in JSON and PHP data handling

I am facing an issue with my PHP page that requests data from another page using JSON. Currently, I have an AJAX call set up like this: $.ajax({ type: "POST", url: "getdata.php", cache:false, data:"lis ...

Having trouble generating package.json with npm init on my Mac

Every time I attempt to generate a package.json file by using the command npm init, I encounter the following issue: npm http GET https://registry.npmjs.org/init npm http 304 https://registry.npmjs.org/init npm http GET https://registry.npmjs.org/daemon n ...

Dynamic rows in an Angular 2 Material data table

I'm currently working on dynamically adding rows to an Angular 2 Data Table ( https://material.angular.io/components/table/overview) by utilizing a service called "ListService". This service provides me with the columns ("meta.attributes") to be displ ...

What's causing the "* before initialization" error in Vue with TypeScript?

I am encountering an issue with my code where I get the error "Cannot access 'AuthCallback' before initialization" when attempting to call the router function in the AuthCallback component. What could be causing this problem? The desired function ...

Encountering browser freezing issues with a Next.JS app when trying to add an input field

I am currently utilizing Next.JS to construct a form with two inputs. I have followed the traditional React approach for input text reading and validation. "use client" import { firebaseApp } from '@/app/firebase'; import React, { useCa ...