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

Validation needed for data list option

Here are all the details <form action="order.php" method="post" name="myForm" onsubmit="return(validate());"> <input type="text" list="From" name="From" autocomplete="off" placeholder="From Place"> <datalist id="From"> <option valu ...

What is the best way to update the value of a variable within a specific child component that is displayed using ngFor?

Hello there, I'm in need of some assistance with a coding issue. I have a parent component named "users-list" that displays a list of child components called "user" using *ngFor. Each component's class is dynamic and depends on various internal v ...

"Figuring out a way to include a link with each image in a react-s

I am currently working on a project in Gatsby and encountering some issues with the homepage banner. I am using react-slick which seems to be functioning fine, but when I try to add content on top of each image, it causes some problems. Specifically, setti ...

Various filters have been utilized on an array of objects

Within one of my Vue components, the code structure is as follows: <li class="comment" v-for="comment in comments"> ... </li> Accompanied by a computed method: computed: { comments() { // Here lies the logic for filtering comment ...

The animation in Rive feels sluggish when navigating to a page with animation in Blazor WASM, despite implementing dispose methods

After attempting to display river animation on the index page using Blazor WASM (basic template), I encountered some performance issues. When navigating back and forth between the Counter page and the index page, I noticed that after around 20 clicks, the ...

Running JavaScript function from AJAX response containing both HTML and JavaScript code

For my first time using AJAX to prevent page refresh upon form submission, everything works flawlessly. The data is received in HTML form and placed into the designated div. However, I am encountering an issue with one of the JavaScript functions responsib ...

Customize React JS Material UI's InputBase to be responsive

https://i.stack.imgur.com/9iHM1.gif Link: codesandbox Upon reaching a certain threshold, like on mobile devices, the elements inside should stack vertically instead of horizontally, taking up full length individually. How can this be achieved? ...

Guide to incorporating JSON data into HTML through JavaScript

As I attempt to load data from a JSON file to .js and then to an HTML file, I am facing a challenge. While I can successfully load the JSON values into .js, I am unable to transfer the same values to HTML. Below is the code snippet - could anyone provide a ...

You are unable to use multiple background colors on a material UI snackbar

Is there a way to apply multiple background colors to a material UI snackbar? I attempted using linear-gradient as shown below, but it didn't work. import Snackbar from 'material-ui/Snackbar'; const bodyStyle = { border: `2px solid ${co ...

Change the name of the interface from the imported type

When working with Google Apps Script, I have implemented the Advanced Calendar Service, originally labeled as "Calendar". However, I have renamed it to "CalendarService". How can I incorporate this name change when utilizing the type definitions for Apps S ...

Attempting to insert a square-shaped div within a larger square-shaped div and enable it to be moved around by dragging

Imagine this scenario: I have a button and a large div. When the button is clicked, the code adds a new div inside the larger one. However, the new div is not draggable because I didn't implement the necessary code. I'm also trying to figure out ...

Tips for sending data from a JSP to a Servlet with Javascript

My code creates an array of circular buttons with dynamic values. When clicked, these buttons get deleted and their values are stored in a JavaScript object array. I need to send these deleted button values to a servlet once my task is complete. To do this ...

Triggering multiple functions by clicking on the Icon

I'm trying to execute two different functions when the user clicks on the Icon, but I keep getting an error that says: Expected onClick listener to be a function, instead got a value of object type. Can someone please help me figure out what I am doin ...

Fetching post value via AJAX in Codeigniter views: A step-by-step guide

Having issues receiving Ajax response as it is coming back null. The HTML layout includes: <form method="post" action="<?php $_SERVER['PHP_SELF'] ?>"> <select class="form-control" class="form-control" id="choose_country"& ...

Step-by-step guide for deploying an Angular 2 CLI app on GitHub

As a front-end engineer, I have limited experience with deployment. Currently, I am working on my pet project using angular-cli. What is the best way to deploy it on GitHub Pages? Are there any other straightforward methods for deployment? ...

The React component using createPortal and having its state managed by its parent will remain static and not refresh upon state modifications

I am facing a problem that can be seen in this live example: https://stackblitz.com/edit/stackblitz-starters-qcvjsz?file=src%2FApp.tsx The issue arises when I pass a list of options to a radio button list, along with the state and setter to a child compon ...

Using Vue.js for handling events with the passing method

As a newcomer to Vue.js, I am currently trying to understand method event handling. My goal is to read a barcode using input from a web camera and display its raw content. The function works perfectly if I just render the raw content. However, when I att ...

Transfer the controller of the parent directive to a directive controller, similar to how it is executed in the "link" function

In the structure of my directives, there is a need for one directive to have functions in its controller so that child elements can interact with it. However, this directive also needs access to its parent directive's controller. I am unsure of how to ...

transforming basic pagination using javascript to jquery implementation

I have a straightforward pagination code written in raw JavaScript. function UpdatePage(e){ if(busy == 0) { switch(e) { case "Next": page = p+1; p++; break; ca ...

V5 Modal & jQuery: troubleshooting the spinner problem during loading of content

I'm working on displaying a spinner while loading modal content with the use of bootstrap v5 modal and jQuery. However, I encountered some issues in my example. The spinner does not display again after closing the modal; it only shows for the first t ...