Compilation of Angular 6 project is failing due to error TS1005: Expected ',' instead of the symbol used

I keep encountering an error message whenever I try to compile my code.

ERROR in src/app/form/form.component.ts(22,39): error TS1005: ',' expected.

Below is the snippet of code where the error is pointing:

import { Component, OnInit } from '@angular/core';
import { CommService } from '../services/comm.service';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {


  user = {
    Doctor: '',
    Patient: '',
    Type: '',
    Diagnosis: ''
  };

  constructor(private CommService: CommService) { }

  ngOnInit() {
    this.CommService.setData(this.user);

  }

}

The mentioned code above depicts a simple form that captures input (user={}) and forwards it to a service (CommService.setData).

Here's the implementation of the CommService:

import { Injectable } from '@angular/core';
import { Observable, of, Subject } from 'rxjs';
import { FormComponent } from '../form/form.component';

@Injectable()
export class CommService {

  getData$: Observable<any>;
  private getDataSubject = new Subject<string>();


  users = {
    Doctor: '',
    Patient: '',
    Type: '',
    Diagnosis: ''
  };

  constructor() { }

  setData (data: any[]) {
    this.users = data;
  }

  getData() {
    return this.users;
  }
}

As a beginner, I suspect my mistake might be trivial. Any assistance would be greatly appreciated.

UPDATE: Upon suggestions from knowledgeable individuals, I cross-checked the TypeScript version in the "package.json" file. The TypeScript version originally stated was `"typescript": "~2.7.2", which I then updated to 2.9 but alas, the error persists!

Additionally, here is the complete package.json file for reference:

  {
  "name": "my-form",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

Answer №1

The problem was caused by using an outdated version of TypeScript. I resolved it by updating to the most recent version.

Answer №2

Ensure you have the most recent version of typescript installed. If not, refer to this link.

Additionally, note that using of in older versions of rxjs may cause issues. Update it in your service file with:

import { Observable, Subject } from 'rxjs';

and use

import "rxjs/add/observable/of";

or

import { of as observableOf } from 'rxjs/observable/of';

For more information, refer to the responses provided in this post.

Answer №3

If you find yourself revisiting a legacy Angular application several years later, maybe this insight can assist you.

Attempting to upgrade Typescript ended up being a fruitless endeavor. The project is locked into v2.7.2 in the devDependencies. Although I attempted to update to Typescript v2.9.x, going beyond that (such as v2.10.0) led to TypeScript support issues with Angular 6.

I identified that the TS error stemmed from minimatch 5.1.x. By using npm ls @types/minimatch, I traced the dependency tree responsible for bringing it in.

% npm ls @types/minimatch
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f081a1d1e0f0f3f4f514f514e">[email protected]</a> /Users/tstone/Development/portal/src/main/webapp
└─┬ @angular-devkit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5d2cecbc38ac6c9c0d2cbc6d5e79788988897b8cc7007857695c80c6d4c3c7cdd2d5d4dfd9">[email protected]</a>
  └─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c6d4d3c1d0d2da9cd5d4c79cc2d4c3c7d4c3f1829f80809f82">[email protected]</a>
    └─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0561606945312b342b34">[email protected]</a>
      └─┬ @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e5eeede0c2b5acb0acb2">[email protected]</a>
        └── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e63676067636f7a6d664e3b203f203c">[email protected]</a>

To address the issue, I decided to upgrade @angular-devkit/build-angular in order to obtain new type definitions. I gradually incremented @angular-devkit/build-angular until reaching the first version that successfully compiled (which was 0.8.9).

This information may prove helpful. It can be frustrating dealing with such errors in legacy applications that are not intended for upgrading. Particularly when experienced developers claim "it works on their machine," but confess they haven't tested it in years and the CI pipeline has been inactive for some time.

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

Resolving the bothersome complications of self-looping steps in jQuery animate delay

My timeline definition includes selectors and a sequence of delays and animations to apply to an object. I have also provided the option to loop through the steps for a specific object. Here is the function that I use to queue the animations: function an ...

Is there a way to execute a tanstack react query externally, as I am unable to utilize useQuery within the component?

const fetchSurveyData = useQuery(["survey"], () => getSurveyData({ page: 1, userLangCode: langCode, sortColumnName: "Date", sortColumnOrder: "DESC", country, ip, }) ); After tr ...

Utilizing Next 13 for flexible MDX imports

Recently completed the Next13 + MDX Tutorial, however, I am still unclear on how to dynamically load my mdx files. My mdx files are not hosted on a remote server, so I do not require next-mdx-remote. Nonetheless, I am in need of a method to load different ...

Retrieve the unchanged data from the source before any modifications using ag-Grid

Is the original data saved anywhere when accessing data with the ag-Grid API? For instance, can it be retrieved from: api.getRowNode(id) This information could come in handy, especially if you want to highlight an edited cell by comparing values and chan ...

Animating jQuery Accordion in Horizontal Direction Extending to the Far Right

After implementing a horizontal accordion in jQuery based on the tutorial found at the following link: A minor issue arose during animation where a slight space was added on the far right side, causing the tabs to shift slightly. This problem is particula ...

npm encountered an issue when attempting to install a package from a local directory: EISDIR: illegal operation on a directory, read

While attempting to add my compiled TypeScript output as a local package using npm, this error appears: $ npm install --save ../app/out npm ERR! eisdir EISDIR: illegal operation on a directory, read npm ERR! eisdir This is most likely not a problem wit ...

Getting JSON with duplicate keys in JavaScript can be achieved by parsing the data using a custom function

I am attempting to retrieve JSON from a URL, but I have encountered an issue where the response object is removing duplicate keys. Is there a way to fetch the JSON without eliminating these duplicates? Below is my JavaScript code: $('document'). ...

Is it possible to convert a leaflet marker into a nuxt-link function?

Recently, I started using nuxt and vue-leaflet to create an interactive map, even though I am quite new to it. This map consists of multiple markers representing different locations. The goal is for the respective page to open when a user clicks on a mark ...

AngularJS static list with dynamically changing content

Seeking inspiration on creating an AngularJS information monitor with a maximum of 6 rows. The display should show new rows at the top, pushing out the oldest row from the bottom when there are already 6 rows visible. Rows can also disappear unexpectedly. ...

Using Express to Authenticate with the Yelp API

I am currently trying to make a GET request to Yelp's API for a simple search using Express and Node.js, but I am struggling with setting the request header with the provided API key. Despite following the documentation by passing basic authentication ...

Discovering the value of a variable within an object using JavaScript

Here is the code snippet I am working with: for (var i = 0; i<ke.length; i++) { var ar = ke[i]; var temp = {ar :(n[a])}; //how to resolve a console.log(temp); } The 'temp' object is supp ...

What exactly happens behind the scenes when utilizing the React hook useEffect()? Is an effect set up with useEffect able to halt the main thread

According to the documentation for the useEffect() hook in React, it states that: "Effects scheduled with useEffect don’t prevent the browser from updating the screen." Insight Unlike componentDidMount or componentDidUpdate, effects set with ...

Tips for creating a tailored Express.js request interface using Typescript efficiently

I have been working on designing a custom Express request interface for my API. To achieve this, I created a custom interface named AuthRequest, which extends Request from Express. However, when attempting to import my interface and define req to utilize t ...

What is the most efficient method for transforming an index into a column number that resembles that of Excel using a functional approach?

Is there a way to write a function that can produce the correct column name for a given number, like A for 1 or AA for 127? I know this question has been addressed numerous times before, however, I am interested in approaching it from a functional perspect ...

Adjusting the color of the legend on a LineChart in ExtJS 4 on-the-fly

I've been trying to find information on how to modify the color of the x legend in a Line chart without success. Can anyone help me with this? I have included an image of the chart for reference. ...

NodeJS/express: server became unresponsive after running for some time

Initially, my service using express and webpack ran smoothly. However, I started encountering an issue where the server would hang with no message code being received, as shown in the server message screenshot (server message screenshot). This problem kept ...

The issue arises when attempting to drop elements from two lists with incorrect positions and mismatched coordinates

Angular 9 had a working version of this, which you can find here: https://stackblitz.com/edit/two-drop-list-problem-zp556d?file=package.json Now in the new Angular 14 version: https://stackblitz.com/edit/angular-ivy-1jvbnn?file=src%2Fapp%2Fapp.component ...

Limiting input to specific characters is effective on Chrome, but unfortunately does not function on Firefox

This code snippet is designed to restrict user input to lowercase letters from a-z, numbers from 0-9, and the dash character "-". While it functions correctly in Chrome, it does not allow any input in Firefox. What could be causing this issue? $('#sl ...

What is the best way to modify an existing object in an Observable Array in Angular?

As I work on my Ionic 5 / Angular application, a challenge arises when attempting to update a Conversation object within the existing array of Conversation: private _conversations = new BehaviorSubject<Conversation[]>([ new Conversation( & ...

The TypeScript package encountered an unexpected token export

I have integrated a module from a private git repository. Package.json: "my-module": "git+https://username:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cebeb98eaca7baacbbada5abbae0a1bca9">[email protected]</a> ...