Encountering an issue while upgrading to Angular 10: Unable to interpret "tsconfig.json" as a valid JSON AST Object

I'm currently updating my Angular 9 app to Angular 10 and encountering this error:

> Removing "Solution Style" TypeScript configuration file support.
× Migration failed: Failed to parse "tsconfig.json" as JSON AST Object. PropertyNameExpected at location: 571.
  See "C:\Users\F11K\AppData\Local\Temp\ng-T8Bgiu\angular-errors.log" for further details.

Here is the detailed content from the log file:

[error] Error: Failed to parse "tsconfig.json" as JSON AST Object. PropertyNameExpected at location: 571.
    .... (Additional error message lines)

I reviewed the tsconfig.json file and made manual adjustments, changing "module": "esnext" to "module": "es2020", but it did not resolve the issue.

The log provided is confusing as it does not pinpoint the exact location of the error. Can someone please assist me in resolving this? Thank you.

Content of tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "incremental": true,
    "tsBuildInfoFile": ".tsbuildinfo",
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types",
      "tests"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "baseUrl": "src",
  }
}

Answer №1

After removing a redundant comma in my code, I was able to solve the issue. It seems like your problem can be fixed by deleting the comma after "baseUrl" in the "src" attribute.

Answer №2

When using Angular's "ng update," there is a built-in JSON linter that will catch errors if your JSON file contains a comma or has an unusual format. To fix this, you can utilize jsonlint.com as recommended by @heretic-monkey to clean up your JSON before proceeding.

On a side note, I attempted using --force and -migrateOnly options but had no luck; the issue was simply caused by a misplaced comma at the end of my 'lib' array. { "lib": [ "es2017", "dom" ], }

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

Tracking button clicks on Angular Material using Google Analytics through Google Tag Manager

I'm currently utilizing the Universal Analytics tag within Google Tag Manager to monitor user interactions. I'm looking to establish click listeners in GTM that will trigger when specific buttons on the page are clicked. These buttons are Angular ...

Creating components on the fly as soon as their resources become available

I need to dynamically add a child component within another component only after the image inside the child component has been fully loaded. child.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'a ...

How to Position Logo in the Center of MUI AppBar in React

I've been struggling to center align the logo in the AppBar. I can't seem to get the logo to be centered both vertically and horizontally on its own. Here is my code from AppBar.tsx: import * as React from 'react'; import { styled, useT ...

Angular appears to be having trouble with localStorage functionality

Having an issue with my service that interacts with a local NOTES object array using localStorage. Whenever the page refreshes, the previously entered data is lost and only the initial data in the const NOTES array remains. Can't seem to figure out wh ...

Running a TypeScript program that has been compiled with module resolution is not working as expected

I am currently in the process of compiling a TypeScript file with the following code: import { magic } from 'lib/magic'; magic(); The file structure looks like this: ./src/ main.ts lib/ a/magic.ts b/magic.ts Within ...

In React and TypeScript, when I pass a state as a prop, the data fails to render

Here is the useState function for managing the Data Interestingly, removing this state from the code doesn't affect rendering at all. const [cart, setCart] = useState([] as Product[]); This piece of code handles Mapping and Rendering the Data <Sin ...

Attempting to imitate a form using Angular 2's HTTP post functionality

I am working on an ionic2 application that requires authentication to be done on an existing PHP website and then execute certain requests within it. I do not have access to the source code of the website. Since I am using ionic2, CORS should not be an iss ...

Troubleshoot: Issue with binding data from DynamicComponentLoader in Angular 2 template

My implementation involves the utilization of DynamicComponentLoader and is based on the Angular2 API Guide. https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html The code structure I have set up looks like this: import {Page} fro ...

The error message "TypeError: jit__object_Object_38 is not a constructor" has been encountered in the context of using Ng

Apologies for any confusion, I have been experimenting with Unit testing in Angular 2. Upon running npm run test, I encountered a strange error that I am unable to resolve: import { TestBed, async, inject } from '@angular/core/testing'; import { ...

Issue TS1259: The module "".../node_modules/@types/bn.js/index"" can only be imported as the default using the 'esModuleInterop' flag

Currently, I am utilizing Hiro Stack.js which I obtained from the following link: https://github.com/hirosystems/stacks.js/tree/master/packages/transaction. For additional information, please refer to . Even when attempting to compile a fully commented out ...

What are the potential drawbacks of using this alternative method instead of `useCallback` in React to prevent unnecessary re-renders of children components?

While exploring some code, I stumbled upon an alternative method to prevent function recreation during renders compared to the official useCallback hook. This method seems to offer certain benefits over useCallback, but I am interested to know if there are ...

The custom error page in NextJS is failing to display

In my custom pages/404.ts file, I have coded the following: export default function NotFound() { return <h1>404 - Page Not Found</h1> } Additionally, there is another page that displays a 404 error when the organization is null: import Error ...

I anticipated receiving an array of objects from the API response, but instead, I am dealing with an array of Promises in my React app using TypeScript

Apologies if this question seems basic to you. I am still new to TypeScript and working with Promises. Despite searching on various platforms, I couldn't find a relevant solution. Can you assist me in receiving an array of objects instead of promises? ...

Guide to customizing Material UI theme using Typescript in a separate file

Trying to customize Material UI theme overrides can be a bit tricky, as seen in the example below: // theme.ts const theme: Theme = createMuiTheme({ overrides: { MuiButton: { root: { display: 'inline-block', fontWeigh ...

IE11 displaying empty placeholders instead of PrimeNG icons after deployment on server

Currently, I am in the midst of an Angular project that heavily relies on PrimeNg for various components. While everything runs smoothly when testing the project locally across all browsers (including IE11 and Chrome), a hiccup arises once the project is ...

Creating a table with merged (colspan or rowspan) cells in HTML

Looking for assistance in creating an HTML table with a specific structure. Any help is appreciated! Thank you! https://i.stack.imgur.com/GVfhs.png Edit : [[Added the headers to table]].We need to develop this table within an Angular 9 application using T ...

Why is it that in Angular, console.log(11) is displayed before console.log(1)?

Can someone help me understand why my simple submit method is printing Console.log(11) before Console.log(1)? I'm confused about the order of execution. submit(value) { this.secServise.getUserById(this.currentUser.mgId).subscribe( uAddrs => { ...

Create a package themed with Material UI for export

I am attempting to create a new npm package that exports all @material-ui/core components with my own theme. I am currently using TypeScript and Rollup, but encountering difficulties. Here is the code I have: index.ts export { Button } from '@materia ...

What is the best way to set up a JSON attribute with properly formatted JSON data?

Within this code snippet, the variable some is assigned a JSON string that requires expansion and proper indentation for improved readability. export class MyComponent implements OnInit { some:any = JSON.parse('[{"id":"EN","fill":"blue","classb ...

Bidirectional data binding on the table

I am struggling to implement two-way data binding in a table between my .ts and my .html files. I have a structure that adds a new equipment to the array, and I want that new equipment to display on the table within the same screen. I believe it involves ...