错误 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"
  }
}

Answer 1

问题是我刚刚更新到最新的过时的打字稿版本

Answer 2

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, eg, 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.

Answer 3

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