Issues with include and exclude directives in tsconfig.json are causing problems

I am currently working on a web project that involves organizing folders.

Within my project structure, I have subfolders like the following:

src/app/shared/models
src/app/shared/services
src/app/shared/types

Each of these subfolders contains additional folders or files within them. However, I want to exclude specific folders from being included in my project. I attempted to do so by using the following configuration:

  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "src/app/shared/**/*"
  ]

Unfortunately, this setup is not working as intended. Even specifying "src/app/shared/*" did not yield the desired result. Can anyone provide guidance on how to achieve this?

Below is an excerpt from my current tsconfig.json file:

{
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2015",
      "dom"
    ]
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "src/app/shared/**/*"
  ]
}

Any help would be greatly appreciated. Thank you!

typescriptglobtsconfig

Answer №1

When using the "exclude" keyword to remove files from the compilation process, it's important to also exclude any other files that reference them using either a triple-slash directive or an "import" statement.

In a project defined by a tsconfig.json file, all files in the folder and its sub-directories are automatically included unless specified otherwise with the "exclude" or "files" entries.

It's important to note that automatic inclusion of files in tsconfig.json does not consider module resolution, so files targeted for module imports will still be compiled even if they were previously excluded.

The "include" and "exclude" properties take glob-like file patterns, including wildcards such as "*", "?", and "**/".

  • "*" matches zero or more characters
  • "?" matches any one character
  • "**/" recursively matches any subdirectory

When using the "files" property, provide a list of relative or absolute file paths.

Setting "baseUrl" specifies the location where the compiler should find modules, assuming that non-relative module imports are relative to this baseUrl.

Files included with "include" can be further filtered using "exclude", but files explicitly listed in "files" will always be included regardless of exclusion settings.

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

An error occurred while running React, Next.js, and Type Script: Unhandled Runtime Error - TypeError: Unable to access 'value' property of undefined

I have been working on a multi-page form and using the antd package to add some styling to it. On the main page of the form, I implemented the following code (making sure I imported everything required). export class CreateNewContract extends Component ...

reactjstypescriptnext.jsjsx

The POST requests on Next JS Mock API endpoints include parameters passed in the req.body

I am currently running Next JS API tests using jest with a custom testClient. The code for the testClient is as follows: import { createServer } from 'http'; import type { NextApiHandler } from 'next'; import type { __ApiPreviewProps } ...

typescriptjestjsnext.js

What is the best way to convert this tsc script into an npm script in package.json?

I am looking to execute the following script as an npm script: tsc src/*.tsc --outDir bin When I run this command directly in the terminal, it works as expected. However, when I add the exact same script to my package.json: { "scripts": { ...

node.jstypescriptpackage.jsontsconfignpm-scripts

Enforcing the requirement of null values

My goal is to create a variable that can either hold a number or be null. The purpose of this variability is to reset the variable at times by setting it to null. However, I am facing an issue where if I declare the variable with the type number | null, I ...

typescript

Navigating through complex routes was tricky in Next.js 14 due to the error 404 on hard navigation with

While working on implementing tab groups using Parallel Routes in Next.js 14, I encountered an issue where a 404 page only appears during hard navigation to /gnb/mypage/tab1. The tabs and their navigation function properly on initial render and when switch ...

reactjstypescriptnext.jsroutestabs

Error encountered during the deployment of Ionic 3 with TypeScript

After completing the development of my app, I ran it on ionic serve without any issues. However, when compiling the app, I encountered the following error message. Any assistance in resolving this matter would be greatly appreciated. [15:40:08] typescri ...

angulartypescriptionic-frameworkionic3

Unable to retrieve component name using React.Children

While working with react in the nextjs framework, I attempted to create my own dropdown component structured as follows: <Dropdown> <DropdownToggle>Action</DropdownToggle> <DropdownMenu> <DropdownItem>Menu 1</Dr ...

javascriptreactjstypescriptnext.js

Tips for transforming alphanumeric characters into value ranges using Typescript

myArray = ["AB01","AB02","AB03","AB04","AB11","BC12","BC13", "SB33"]; // code snippet to create expected string: "AB01-AB04, AB11, BC12-BC13, SB33" The array contains combinations of one or two letter characters followed by two or three digits. Examples ...

arraystypescriptrange

Error: monaco has not been declared

My goal is to integrate the Microsoft Monaco editor with Angular 2. The approach I am taking involves checking for the presence of monaco before initializing it and creating an editor using monaco.editor.create(). However, despite loading the editor.main.j ...

javascriptangulartypescriptmonaco-editor

Ways to resolve eslint typedef error when using angular reactive forms with form.value

I am facing an issue with my formGroup and how I initialized it. Whenever I try to retrieve the complete form value using form.value, I encounter an eslint error related to typecasting. userForm = new FormGroup<user>({ name: new FormControl<st ...

javascriptangulartypescripteslintangular-reactive-forms

How can I import a node-js dependency into my webpack project when the package already comes with type definitions included?

Don't bother using the deprecated @types/chalk package because the chalk library already has type definitions included. But I keep encountering the error message TS2307: Cannot find module 'chalk'. https://i.sstatic.net/uDIJi.png The proje ...

node.jstypescriptwebpack

Setting an attribute on a custom component that is dynamically created within an Angular application

I am working with a custom library component called <my-icon>. To display the icon, I need to specify the property [name] like this: <my-icon [name]='warning'></my-icon> Currently, I am dynamically creating these icons in Type ...

angulartypescript

Is it possible to implement a redirect in Angular's Resolve Navigation Guard when an error is encountered from a resolved promise?

I have integrated Angularfire into my Angular project and am utilizing the authentication feature. Everything is functioning properly, however, my Resolve Navigation Guard is preventing the activation of the component in case of an error during the resolve ...

angulartypescriptangular2-routingangularfire2

What is the method for generating an observable that includes a time delay?

Question In order to conduct testing, I am developing Observable objects that simulate the observable typically returned by an actual http call using Http. This is how my observable is set up: dummyObservable = Observable.create(obs => { obs.next([ ...

angulartypescriptobservable

The type 'Data' is lacking the following attributes from its definition

Being a newcomer to Angular 8, I can't figure out why this error is popping up. If you have any suggestions on how to improve the code below, please feel free to share your tips. The error message reads: Type 'Data' is missing the follo ...

jsonangulartypescript

What is the best way to integrate Emotion styled components with TypeScript in a React project?

Currently, I am delving into TypeScript and attempting to convert a small project that utilizes Emotion to TypeScript. I have hit a roadblock at this juncture. The code snippet below export const Title = styled.div(props => ({ fontSize: "20px", ...

javascriptreactjstypescriptemotion

What is the best way to ensure observables in a template (using async pipe) are fully subscribed to before executing any initialization code?

I am facing an issue with my HTTP service that returns information based on a given item ID. The data is fetched using a Subject, which receives the initial data in the ngOnInit method. To display the returned data in the HTML, I utilize the async pipe. ...

angulartypescriptsubject-observer

Mastering the Use of *ngIf with *ngFor: Best Practices for Proper Implementation

Can someone help me rewrite the combination of *ngIF and *ngFor below? I understand that my issue may be similar to others, but please know that this is different. Everything seems to be working fine. The only problem I'm facing is that the color of ...

angulartypescript

I'm encountering an issue in my node application where it is unable to access the push

I am a beginner in the world of node.js and express. Whenever I try to start my application using the command npm start, I encounter an error message saying Cannot Read property push of undefined from my index.js file. The problematic code snippet looks l ...

javascriptnode.jstypescriptexpress

Next.js is having trouble identifying the module '@types/react'

Every time I attempt to launch my Next.js app using npm run dev, an error notification pops up indicating that the necessary packages for running Next with Typescript are missing: To resolve this issue, kindly install @types/react by executing: np ...

javascriptreactjstypescriptnpmnext.js