Typescript compiler not excluding the node_modules directory

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Attempting to transition an angular2/beta8 application to RC1, following the restructuring outlined in the Quickstart guide.

After copying the tsconfig.json file into the project directory and preparing everything else accordingly, running tsc results in numerous errors within files located in the node_modules folder. Why is the compiler even searching there in the first place?

typescriptangulartsc

Answer №1

Include the following setting in your tsconfig.json file:

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

Answer №2

Alex, I'm not sure if you already found a solution to this, but there is a helpful comment on the mentioned question/answer link by LDL which provides an answer posted by Srikanth Injarapu.

In case you prefer not to visit the link, here's the answer:

If you are targeting ES5, add "node_modules/typescript/lib/lib.es6.d.ts" to tsconfig.json file :

{
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
     "noImplicitAny": false,
     "outDir": "built",
     "rootDir": ".",
     "sourceMap": false
   },
   "files": [
     "helloworld.ts",
     "node_modules/typescript/lib/lib.es6.d.ts"
   ],
   "exclude": [
     "node_modules"
   ]
 }

EDIT

In my own application, I utilize webpack for building my app and I am encountering the same errors in the console. I am currently investigating a solution and will share my findings soon.

Answer №3

If you're working with webpack, I found that simply including the "exclude" property wasn't getting the desired result for me.

What worked instead was adding all file extensions to the webpack "resolve" property and making sure to exclude node_modules from any "rules" objects:

resolve: {
    extensions: ['*', '.ts', '.tsx', '.js']
},
module: {
     rules: [
            {
               test: /\.ts(x?)$/,
               exclude: /node_modules/,
               use: [
                    {
                        loader: "ts-loader"
                    }
               ]
             },
             // Ensure that all output '.js' files have their sourcemaps re-processed by 'source-map-loader'.
             {
                enforce: "pre",
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "source-map-loader"
             },
           ]

Answer №4

I managed to fix the problem by updating the global TypeScript package using npm.

npm update -g typescript

After that, you can remove your tsconfig file and generate a new one using tsc --init

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

The focus of the input is lost when the value is being edited, specifically in the case where ngFor and ng

I'm facing an issue with a simple list that binds two-way to a parameter hero in my hero.component.ts. Whenever I begin typing in the input field, it seems to lose focus and I have to click on it again. How can I ensure that users are able to edit th ...

javascripthtmlangularangular5

Angular: Updating image tag to display asynchronous data

Utilizing Angular to retrieve user profile pictures from the backend, specifically Node.js/Express, has been mostly successful. However, there is one issue that I have encountered. The HTML displaying the profile picture does not re-render when the user up ...

htmlangulartypescript

Adding a total property at the row level in JavaScript

Here is a JavaScript array that I need help with: [{ Year:2000, Jan:1, Feb: }, {Year:2001, Jan:-1, Feb:0.34 }] I want to calculate the total of Jan and Feb for each entry in the existing array and add it as a new property. For example: [{ Year:2000, Ja ...

javascripttypescript

Why does the ReactJS MaterialUI Modal fail to update properly?

Recently, I encountered a curious issue with my Modal component: https://i.stack.imgur.com/dkj4Q.png When I open the dropdown and select a field, it updates the state of the Object but fails to render it in the UI. Strangely, if I perform the same action ...

javascriptreactjstypescriptmaterial-ui

Error: Unable to access the property 'fn' of an undefined object in electron version 2 using Angular 6

I am currently utilizing Angular 6.0.3 and electronjs 2.0.2 with the package.json configuration shown below: { "name": "test", "version": "1.0.0", "license": "MIT", "main": "electron-main.js", "author": { "name": "Moh ...

javascriptangularelectronangular6

Modify the Subform element based on the chosen option in the dropdown menu

I am working on a reactive form that includes a select element. Depending on the selected value, different subforms should be displayed. Each subform has its own form group. I have successfully implemented the functionality to show the different subforms a ...

angularangular-reactive-forms

Error: The "start" script is missing in your Angular project

Recently, I created an Angular project in VS Code. Everything seemed to be going smoothly until I attempted to run npm start, only to encounter the following error: npm ERR! Missing script: "start" in angular project" After inspecting my package.json fi ...

node.jsangular

Two distinct arrays interacting and syncing with each other through a single API request

I find myself in a strange situation. I am dealing with two objects: sessionBase: ISessionViewWrapperModel = <ISessionViewWrapperModel>{}; sessionDisplay: ISessionViewWrapperModel = <ISessionViewWrapperModel>{}; After making an api call, both ...

arraysangularapifilter

Ways to access subscription value in Angular without relying on async await

Is there a way to extract the value inside the subscribe in Angular? I am dealing with this code snippet: async trackingInfo(trackingNumber) { const foo = await this.userService .trackOrderStatus(trackingNumber) .subscribe((status) => ...

angular

An effective method for targeting a specific button within a CSS file

I have multiple button tags in my code, but I need to style a specific one using CSS. How can I target this particular button and apply styles only to it while leaving the others unchanged? Do I need to assign the button to a variable and reference that va ...

javascripthtmlcssangular

Server requests are being redirected to /index.html in order to load the React/Angular SPA

Imagine having a React or Angular application hosted at www.mywebsite.com/index.html with Apache as the server. The app includes various routes like /aboutus or /faq, even though there are no individual files for each route (/aboutus.html or /faq.html). Th ...

angularreactjsreact-routerangular-routingdeep-linking

What is the most effective way to code and define a MatSelect's MatSelectTrigger using programming techniques?

How can I programmatically set the MatSelectTrigger template for a MatSelect instance using the provided reference? The documentation mentions a settable customTrigger property, but information on the MatSelectTrigger class or how to create one dynamically ...

angulartypescriptmat-select

What is the RxJS operator that corresponds to the combination of observableX and observableY being subscribed to asynchronously in a template?

In my component template, I currently have this code snippet: <mat-spinner *ngIf="((facade.user.data$.isLoading | async) || (facade.product.data$.isLoading | async))"></mat-spinner> My goal is to consolidate this union into a single ...

angularrxjs5

Unable to populate an array with a JSON object using Angular framework

Here is the JSON object I have: Object { JP: "JAPAN", PAK: "PAKISTAN", IND: "INDIA", AUS: "AUSTRALIA" } This JSON data was retrieved as a response from an HTTP GET request using HttpClient in Angular. Now, I want to populate this data into the following ...

javascriptarraysjsonangulartypescript

Trouble accessing data property within a method in Vue 3 with Typescript

I am facing an issue with accessing my data in a method I have written. I am getting a Typescript error TS2339 which states that the property does not exist in the type. TS2339: Property 'players' does not exist on type '{ onAddPlayers(): vo ...

javascripttypescriptvue.jsvue-componentvuejs3

Enhance your Angular-material calendar by incorporating tooltips for dates

I am attempting to include a tooltip on Angular Material calendar dates. I have experimented with using matToolTip but unfortunately, nothing appears when hovering over the dates. <mat-calendar [dateClass]="dateClass()" [startAt]="month" [selected]=" ...

angularangular-material

Next.js Error: Inconsistent text content between server-rendered HTML and hydration. Unicode characters U+202F versus U+0020

Having issues with dates in Next.js development. Encountering three errors that need to be addressed: Warning: Text content did not match. Server: "Tuesday, January 24, 2023 at 11:01 AM" Client: "Tuesday, January 24, 2023 at 11:01 AM" ...

typescriptnext.jsprismahydrationgetserversideprops

The validator function in FormArray is missing and causing a TypeError

I seem to be encountering an error specifically when the control is placed within a formArray. The issue arises with a mat-select element used for selecting days of the week, leading to the following error message: What might I be doing incorrectly to tri ...

angulartypescriptangular-reactive-forms

Learn how to incorporate the dynamic array index value into an Angular HTML page

Exploring Angular and facing a challenge with adding dynamic array index values in an HTML page. Despite trying different solutions, the answer remains elusive, as no errors are being thrown. In TypeScript, I've initialized an array named `months` wh ...

javascriptangular

Adjusting an input field B within the ngOnChange lifecycle hook in Angular 2 when there is a change in input field A

Currently, I am working on a component that includes an input and a variable: @Input() data: string[]; @Input() val: string = ''; ngOnChanges(changes: SimpleChanges) { for (let propName in changes) { if (propName == 'data') ...

angulartriggersonchangeobservableangular2-docheck