如何解决Angular核心文件element_ref.d.ts中的TS1005语法错误？

你遇到的问题是：执行ng test后，预期测试运行并显示通过/失败用例数，但实际出现构建错误，Chrome打开后60秒停止响应。具体错误信息如下：

Version: webpack 4.8.3 Time: 3128ms Built at: 06/01/2018 2:12:39 PM Asset Size Chunks Chunk Names main.js 6.21 KiB main main polyfills.js 6.56 KiB polyfills polyfills Entrypoint main = main.js Entrypoint polyfills = polyfills.js [./src/polyfills.ts] 0 bytes {polyfills} [built] [0] multi ./src/polyfills.ts 28 bytes {polyfills} [built] [./src/test.ts] 0 bytes {main} [built] ERROR in node_modules/@angular/core/src/linker/element_ref.d.ts(20,35): error TS1005: ',' expected.

你的项目package.json配置如下：

{
  "name": "todo-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "json-server": "json-server --watch db.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.2",
    "@angular/common": "^6.0.2",
    "@angular/compiler": "^6.0.2",
    "@angular/core": "^6.0.2",
    "@angular/forms": "^6.0.2",
    "@angular/http": "^6.0.2",
    "@angular/platform-browser": "^6.0.2",
    "@angular/platform-browser-dynamic": "^6.0.2",
    "@angular/router": "^6.0.2",
    "core-js": "^2.5.4",
    "json-server": "^0.12.2",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.2",
    "@angular-devkit/build-angular": "~0.6.3",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.3",
    "@angular/language-service": "^6.0.2",
    "@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": "~1.4.2",
    "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"
  }
}

问题根源 #

这个TS1005: ',' expected错误出现在Angular核心库的类型定义文件中，几乎可以肯定是TypeScript版本与Angular 6.x不兼容，或者依赖安装过程中产生了缓存/损坏文件导致的。Chrome无响应是因为测试构建失败，Karma测试进程无法正常初始化。

具体解决步骤 #

1. 清理依赖缓存并重新安装 #

这是解决依赖不兼容问题最常见的第一步，能排除大部分缓存导致的损坏：

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json文件（如果使用Yarn则删除yarn.lock）
• 运行npm install重新安装所有依赖

2. 确保TypeScript版本与Angular 6.x兼容 #

Angular 6.0.x要求TypeScript版本在>=2.7.2且<2.9.0之间。你的配置中typescript: ~2.7.2是符合要求的，但如果重新安装后问题依旧，可以尝试升级到兼容的更高版本，比如2.8.4：

• 修改package.json中devDependencies里的typescript版本为"~2.8.4"
• 再次执行npm install

3. 对齐全局与本地Angular CLI版本 #

全局CLI版本与本地项目版本不一致也可能导致构建问题：

• 运行ng --version查看本地和全局CLI版本
• 如果全局版本高于6.0.3，执行npm install -g @angular/cli@6.0.3安装与本地匹配的全局CLI

4. 重新运行测试 #

完成以上步骤后，执行ng test，应该能正常构建并运行测试用例，Chrome也会正常响应测试进程。

内容的提问来源于stack exchange，提问作者Robert