Angular Build Showing Error with Visual Studio Code 'experimentalDecorators' Configuration

Currently experiencing an issue in VSC where all my typescript classes are triggering intellisense and showing a warning that says:

"[ts] Experimental support for is a feature that is subject to change in a future build. Set the 'experimentalDecorators' option to remove this warning."

This problem has been documented, with potential solutions found in these resources:

Even though I have updated to a newer version of VSC today, none of the mentioned fixes seem to work.

Steps taken so far:

  • Added the "typescript.tsdk": "../node_modules/typescript/lib" option in my .vscode settings
  • Removed certain lines in tsconfig.json including lib and baseUrl, restarting VSC each time
  • Tested different Typescript versions in package.json
  • Restarted computer as a troubleshooting step

Below is my current tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

VSC version: 2.3.2 and TS version set in package.json: "typescript": "~2.2.0".

Any suggestions on what might be missing here?

javascriptangulartypescriptvisual-studio-code

Answer №1

this is the solution that worked for me:  
tsconfig.js (relevant part):
{
  "compilerOptions": {
    ...
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "dist",
    ...
  },
  "include": [
    "src/index.ts"
  ]
}

Here is the complete file:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "allowJs": true,
    "lib": [
      "es6"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": true,
    "target": "es6"
  },
  "include": [
    "src/db/**/*.ts",
    "src/index.ts"
  ]
}

In essence, I resolved the issue by adding the include attribute instead of using the files attribute.

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

disable the button border on native-base

I'm attempting to enclose an icon within a button, like so: <Button style={styles.radioButton} onPress={() => { console.log('hdjwk'); }}> <Icon ...

javascriptcssreactjstypescriptreact-native

Managing JSON data sent using PHP

After exploring numerous syntaxes from various sources on the internet, I am hesitant to reveal my struggles as it may be hard to distinguish fact from fiction. So... This snippet shows a part of my HTML code: var jsonData = { address: 'address& ...

phpjavascriptjsonjquery

Vue-ctl project creation halted by operating system rejection

While working on a Vue-CLI project, I encountered an issue. Has anyone else faced this problem before? Operating system: Windows 10 - Command Prompt (admin rights) @vue-cli version: 4.5.4 npm version: 6.14.6 Here is the command I ran: vue create font_ ...

javascriptnode.jsvue.jsnpm

Transferring an object from the factory to the controller

I'm currently working on setting up a factory that sends an ajax request to an API and then returns a data object. Here is the code snippet I have written: app.factory('Test', function($http, $q) { var data = {response:{}}; var getM ...

javascriptangularjs

TSLint has detected an error: the name 'Observable' has been shadowed

When I run tslint, I am encountering an error that was not present before. It reads as follows: ERROR: C:/...path..to../observable-debug-operator.ts[27, 13]: Shadowed name: 'Observable' I recently implemented a debug operator to my Observable b ...

angulartypescriptrxjsobservabletslint

When creating utility classes, is it beneficial to offer a non-mutable API to facilitate their integration with frameworks such as React?

Currently, I am working on enhancing the functionality of my DateWithoutTime class. As part of this process, private fields within the class need to be updated by public methods. this.state.dateWithoutTimeInstance.shiftBySpecificDaysCount({ daysCount: 5, ...

javascriptreactjstypescriptimmutabilityreact-state

Arrange elements within an array according to a specific property and the desired sorting sequence

Looking for a way to sort an object array in Angular 16+ based on status. The desired status order is: [N-Op, Used, Unknown, Op] Here's the sample data: const stockList = [ { 'heading': 'SK', 'status': &a ...

arraystypescriptsorting

JavaScript: Passing the "this" object in an AJAX request situation

Here is the code snippet I am working with: $(function(){ $("#CASA").click(function(){ rsExecute("rs/rs_luci.php","premi",1,function(cc){}); var col=$( this ).css( "background-color" ); se ...

javascriptjqueryajax

What is the best way to handle a specific submit button using jQuery/Ajax?

I created a web page with 4 submit buttons that all call the same PHP page process.php using jQuery/Ajax. I trigger this PHP page using the onClick event as shown below: <div class="col-md-12"> <input type="hidden" name="_token" value="<?p ...

javascriptphpjqueryajax

Persuading on the Server-Side

After reading through the Google-Caja wiki, I became intrigued by its capabilities. From what I understand, with Caja we can send a snippet of HTML (such as a ) to Google-Caja's server (cajoling service) for processing. The HTML is cajoled and the Jav ...

javascriptxssgoogle-caja

Issue with SweetAlert2 cancel button being unresponsive while an ajax request is in progress

I have a custom function triggered when a dropdown item is selected, which triggers a sweetalert2 popup. Here's the function: function SwalPopup(ip, method) { var methodmsg = method.charAt(0).toUpperCase() + method.slice(1); swal.fire({ ...

javascriptajaxsweetalert2

Injecting Custom HTML Tag through JavaScript on Page Load in Google Tag Manager

When attempting to inject events into the data layer upon loading DOM pages on my website, I encountered an issue. Since I lack access to the website code and developers are reluctant to make additions, I decided to implement this through a custom HTML tag ...

javascripthtmltagsgoogle-tag-managergoogle-datalayer

Exploring user inputs and displaying variables using JavaScript and HTML 4.01

I was testing some code and I'm facing an issue that I can't figure out: <HTML> <head> <title> Page 1 </title> <script> function myFunction() { var x=document.getElementById("myEmail") document.write(x) } </scr ...

javascripthtmlhtml4

The test case for creating a component in Jasmine titled "should create" threw an error and failed with a TypeError stating: "FAILED TypeError: Cannot read property 'next' of undefined"

One of the key components in my application is responsible for fetching data from the store. @Component({ selector: 'iomt-user', templateUrl: './user.component.html', styleUrls: ['./user.component.scss'] }) export class ...

angularjasmineobservablengrx-store

Create a dynamic JavaScript animation with frames

Is there a simpler method to animate a sprite with just 4 frames in HTML Canvas? Having a background in AS3 and C#, I found the code below to be overly complicated. It seems like I'll be spending hours trying to decipher it. Is there a more modern or ...

javascripthtmlcanvas

Is there a way to set up gulp without relying on npm when using shared hosting?

While working on my shared hosting, I encountered a roadblock regarding the installation of gulp for compiling LESS assets into CSS. The hosting administrator has declined to install npm, which is essential for setting up gulp. Given this limitation, I am ...

javascriptphpnode.jsnpmgulp

Accurate TS declaration for combining fields into one mapping

I have a data structure called AccountDefinition which is structured like this: something: { type: 'client', parameters: { foo: 3 } }, other: { type: 'user', parameters: { bar: 3 } }, ... The TypeScript declaration ...

typescript

Function to save prices as cent-based figures in Javascript using Regex

Trying to extract prices from a string using regex can be tricky, as unexpected issues may arise. For example, obtaining the following values: US$1234.56 $12 $12.34usd $0.56 .56 dollars and converting them to: 123456 1200 1234 56 56 is necessary for s ...

javascriptregex

"Converting a database table record into a JavaScript array: Step-by-step guide

I'm currently expanding my knowledge of PHP by working on a small project. Within my database, I have a table called city_name which consists of columns for id, name, longitude, and latitude. Typically, this table contains around 10-15 rows. When a us ...

javascriptphparrays

Can functions be used as keys in a collection in JavaScript's map?

Using functions as keys in JavaScript can be tricky because for js objects, functions are converted to their "toString" form. This poses a problem if two functions have the same body. var a = function() {}; var b = function() {}; var obj={}; obj[a] = 1; o ...

javascript