error TS1005: ',' expected, failing to compile angular 6 project

Question

whenever i compile, i get this error msg

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

here is the entire code where the error points at:

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 above code is a simple form, it takes input (user={}) and passes it to a service (CommService.setData)

here is the CommService code:

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;
  }
}

i am quite a beginner so i bet my mistake is simple, if u can help me i would be grateful

UPDATE: a couple of smart fellas suggested i check the typscript version in the "package.json" here is what i found: `"typescript": "~2.7.2", so i updated to 2.9 but somehow i still have the same error!

also, here is the entire package.json file

  {
  "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"
  }
}

what is the version of typescript you are using? can you post your pacakge,json too here — Nitishkumar Singh, Jul 26 '18 at 05:03
it looks like i have "typescript": "~2.7.2", i updated typescript using npm but i still get the Error, btw, i use VS Code and it seems to be using typescript 2.9 ,,, what should i do now? — Hasan Aga, Jul 26 '18 at 06:44

Rohan Kumar · Answer 1 · 2018-07-26T08:25:06.230

0

Check if you are using the latest version of typescript, if not then try https://stackoverflow.com/a/46399668/1817690.

Also, of in older versions of rxjs will not work, so change it in your service file

import { Observable, Subject } from 'rxjs';

and use

import "rxjs/add/observable/of";

or

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

Read the answers given for import .of() for Observable in typescript

edited Jul 26 '18 at 08:25

answered Jul 26 '18 at 05:06

Rohan Kumar

40,431
11
76
106

https://rxjs-dev.firebaseapp.com/api/index/function/of I dont know where you got that from – Jota.Toledo Jul 26 '18 at 06:55
as i said, i am a beginne ,so i must've copied it from one of those tutorials online :\ thanks for correction – Hasan Aga Jul 26 '18 at 07:03

score 0 · Accepted Answer · answered Jul 26 '18 at 07:24

0

the issue was an outdated typscript version i simply updated to latest

answered Jul 26 '18 at 07:24

Hasan Aga

718
8
27

score 0 · Answer 3 · answered Nov 17 '22 at 12:12

Coming to this a more than four years later, maybe will help someone maintaining a legacy Angular application.

Upgrading Typescript proved to be a futile exercise. The project pins v2.7.2 in the devDependencies. I upgraded Typescript though v2.9.x` (moving beyond v2.9.x, e.g., v2.10.0, ran into Angular 6 Typescript support errors).

I could see that the TS error was coming from minimatch 5.1.x. I quickly determined the dependency tree pulling this in using npm ls @types/minimatch

% npm ls @types/minimatch
webapp@0.0.1 /Users/tstone/Development/portal/src/main/webapp
└─┬ @angular-devkit/build-angular@0.7.0
  └─┬ webpack-dev-server@3.11.3
    └─┬ del@4.1.1
      └─┬ @types/glob@7.2.0
        └── @types/minimatch@5.1.2

I determined then that I could try upgrading @angular-devkit/build-angular to get new type definitions. I incremented @angular-devkit/build-angular by minor and patch to the first version that compiled cleanly (I stopped on 0.8.9).

HTH. It's a very frustrating error to encounter with legacy applications that won't be upgraded. Especially, when "old hands" working with the code say it "works on their machine," but admit they haven't tried building it in years and the CI hasn't run recently either.

error TS1005: ',' expected, failing to compile angular 6 project

3 Answers3