Mistakes following the modification of tsconfig.json and package.json

Recently, I delved into exploring the Ahead-of-time compilation cookbook for Angular and found it quite intriguing. However, it seems like the errors I am encountering are not directly related to my new venture. You can check out the cookbook here: https://angular.io/guide/aot-compiler

Using Visual Studio 2015, I upgraded my Angular 2 project to version 2.4 without any issues during the build process. Subsequently, I made a modification to my tsconfig.json file by adding 

"lib": [ "es2015", "dom" ]
under compilerOptions. The updated file now appears as follows:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "removeComments": false,
    "noImplicitAny": true,
    "outDir": "dist",
    "suppressImplicitAnyIndexErrors": true
  },
  "compileOnSave": true
}

Upon rebuilding post this alteration, I encountered a new build error:

Build: duplicate identifier 'PropertyKey'.

Ongoing research led me to remove 

"@types/core-js": "^0.9.34"
from my package.json file, which eliminated the prior error. However, new errors surfaced in multiple instances, including:

Build: Cannot find name 'Set'

Build: Cannot find name 'Promise'

Build: Cannot find name 'Map'

The entirety of my package.json file looks like this:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  // Remaining content goes here...
}

In order to stay informed about updates, I have been regularly referring to the dependencies section in the sample package.json file provided at: https://angular.io/guide/quickstart

Please note that while the referenced link is for the JavaScript version, I am actively using TypeScript 2.1.4. This may potentially lead to discrepancies within my file, but I'm unsure how to pinpoint these outdated sections specifically.

angulartypescriptangular2-aot

Answer №1

I don't have much experience with setting up Visual Studio (I usually use IntelliJ). However, you could try including "lib": [ "es6", "dom" ] in your setup. Alternatively, you may want to consider removing "lib": [ "es20125", "dom" ] entirely and instead utilize core-js @types. Take a look at my previous answer for guidance on using core-js.

For more information, check out this related answer:

Angular 2 can't locate Promise, Map, Set, and Iterator

'Cannot find name 'Promise'' error indicates that you might be missing the type definitions for ES6.

It's important to note that Promise, Map, and Set are part of the es6 specification.

Consider using an ES6 polyfill library to resolve this issue.

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

Is there a way to display unused imports and locals as warnings instead of errors in vscode?

When I'm writing TypeScript code in my code editor, it highlights unused imports and local variables as errors, marked with a red squiggly underline: https://i.sstatic.net/zRJMP.png However, I would prefer if these were shown as warnings in the edit ...

typescriptvisual-studio-code

Using Laravel 5.2 passport for secure authentication with Angular 2

Being new to Laravel Passport, I find it quite confusing. I've watched Taylor Otwell's tutorial on Passport but still can't figure out if it's possible to authenticate an Angular app with Laravel Passport. My goal is to develop a Full ...

laravelauthenticationangularlaravel-5.3

Angular Components: Achieving Full Height Issue with TabsResolved

I'm facing a challenge in making my tab fill the full height of the content underneath it. I've tried different solutions like setting height: 100%, but nothing seems to be working. Here is the HTML code: <mat-tab-group [selectedIndex]=" ...

angularangular-material

Bringing in External Components/Functions using Webpack Module Federation

Currently, we are experimenting with the react webpack module federation for a proof of concept project. However, we have encountered an error when utilizing tsx files instead of js files as shown in the examples provided by the module federation team. We ...

reactjstypescriptwebpacktypescript-typingswebpack-module-federation

The readonly property of the ng2-currency-mask <input> element is not functioning properly

Seeking assistance with an input field that requires users to enter monetary values. I am utilizing ng2-currency-mask for this purpose, but I also need the input to be read-only. Adding the readonly attribute did not resolve the issue as the value still ch ...

angularcurrency-formatting

Troubleshooting a CORS problem with connecting an Angular application to a Node server that is accessing the Spotify

I am currently working on setting up an authentication flow using the Spotify API. In this setup, my Angular application is making calls to my Node server which is running on localhost:3000. export class SpotifyService { private apiRoot = 'http://lo ...

javascriptangularcors

Tips for updating the value.replace function for the "oninput" attribute within Angular 7

I need to modify an input based on a value from a TypeScript variable in the oninput attribute. This modification should only apply to English characters. In my HTML file: <input class="form-control" oninput="value=value.replace(r ...

angulartypescriptdomeventsdom-events

Harnessing the Power of FormControlName and Labels in Angular 6

In my project using Angular 6 and reactive forms, I have a grid with a Detail button that opens a modal window displaying student information. However, when implementing the HTML for the dialog box as shown below, I encountered an error message stating: No ...

angulartypescript

Exploring the NestJS framework using mongoose schema, interfaces, and DTOs: A deep dive

As a newcomer to nestJS and mongoDB, I find myself questioning the need to declare DTO, schema, and interface for every collection we aim to store in our mongoDB. For example, I have a collection (unfortunately named collection) and this is the DTO I' ...

mongodbtypescriptmongoosenestjs

Encountering a Runtime Exception while setting up a Client Component in the latest version of Next JS (v13.3

I am facing an issue with a component in my Next JS website. When I attempt to convert it into a Client Component, the page fails to load in the browser and I encounter the following unhandled runtime exception: SyntaxError: "undefined" is not va ...

javascripttypescriptnext.js

Angular integration with MSAL incorporating unprotected resources

Integrating Azure AD into my Angular app has been going smoothly, except for one issue with how it handles HTTP requests. To address this, I added a standard http interceptor to the app: { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, mult ...

angularazurehttpazure-active-directoryazure-ad-msal

Struggling to locate a declaration file for the 'cloudinary-react' module? Consider running `npm i --save-dev @types/cloudinary-react` or exploring other options to resolve this issue

Currently, I am working with Typescript in React. Strangely, when I try to import the following: import { Image } from 'cloudinary-react'; I encounter this error: Could not find a declaration file for module 'cloudinary-react'. ' ...

reactjstypescriptcloudinary

Restrict the properties of an object to match the properties of a different object

I am currently developing an Object patching utility function with the following code snippet class Test{ a:number; b:number; } var c:Test={a:0,b:1} function patchable<T>(obj:T){ return { patch:function<K>(prop:K){ return patc ...

typescript

Troubleshooting a dynamically loaded Angular 2 module in Chrome and VS Code

Currently, I am utilizing WebPack in conjunction with Angular 2/4 and incorporating modules that are lazy loaded. Due to this setup, the components and modules are not included in the primary .js file; instead, their code is distributed across files genera ...

angularwebpacklazy-loading

How to display the Y axis value on the category axis in a solid gauge using amcharts

My Code : <div id="chartdiv"></div> Styling : #chartdiv { width: 100%; height: 200px; } Script: am4core.useTheme(am4themes_animated); var chart = am4core.create("chartdiv", am4charts.RadarChart); chart.data = [{ ...

angularamchartsamcharts4

What is the best method for embedding my token within my user entity?

Currently, I am working on implementing a "forgot password" feature in my application. The idea is that when a user requests to reset their password, they will receive a token via email that expires after two hours. To prevent the generation of multiple to ...

node.jstypescriptexpressjwttypeorm

The delay function in RxJS allows for waiting to return a value until a specific condition is met within a stream and

Currently, I am facing an issue with a method in my application that triggers a server request. This method has access to a stream from the redux-store and needs to execute a callback only when the result of the request is found in the mentioned stream. Th ...

angularreactjstypescriptrxjsreactive-programming

Using the Ternary Operator in JavaScript to Dynamically Update HTML Elements with Angular

Is there a way to convert the code below into a ternary operator so that it can be used in an .HTML file? statusChange && statusChange === 'Employed' ? true : employmentStatus === 'Employed'; To clarify, I want to assign the re ...

javascriptangular

Combine identical arrays of object keys into one unified array

https://i.sstatic.net/A2r5c.png I am striving for this particular output [ productId:106290, productserialno:[{ "12121", "212121" }] ] ...

javascriptangularangular6

Extracting Object Properties from Arrays in TypeScript

Code Snippet: interface Human { name: string; age: number; } interface Pet { name: string; type: string; } If I have an array of Human, how can I get an array of Pet's type. For instance: Is there a built-in way to achieve this in typescr ...

typescript