Angular5迁移至Angular6时providedIn参数类型不匹配报错求助

我之前在从Angular 5升级到6的过程中，也碰到过和你完全一样的TypeScript类型错误！别担心，这个问题大多和依赖版本不兼容或者缓存有关，下面是我亲测有效的解决思路：

可能的原因 #

这个错误本质是TypeScript无法识别providedIn: 'root'这个配置，主要因为：

• Angular 6要求TypeScript版本至少为2.7.x，而Angular 5通常搭配的是2.4.x或更低版本，旧版TS不支持"root"这个字符串字面量类型
• @angular/core的版本没有正确升级到6.x，导致类型定义文件不包含providedIn: 'root'的类型声明
• 项目缓存或node_modules存在旧版本的依赖残留

具体解决步骤 #

1. 升级TypeScript到兼容版本 #

打开项目根目录的package.json，查看typescript的版本号。Angular 6需要的TS版本是~2.7.2（或更高的2.7.x版本）。运行以下命令升级：

npm install typescript@~2.7.2 --save-dev
# 如果你用yarn的话
yarn add typescript@~2.7.2 --dev

2. 确保@angular/core升级到6.x版本 #

同样检查package.json中@angular/core的版本，必须是6.x系列（比如6.1.10）。如果版本不对，用Angular CLI的官方升级命令：

ng update @angular/core

如果手动升级的话，运行：

npm install @angular/core@6.x --save

3. 清除缓存并重新安装依赖 #

旧的缓存或node_modules可能残留了旧版本的类型定义，执行以下步骤清理：

# 删除node_modules文件夹
rm -rf node_modules
# 清除npm缓存
npm cache clean --force
# 重新安装依赖
npm install
# 清理并重新构建项目
ng build --clean

Windows系统可以用以下命令替代删除node_modules：

rmdir /s /q node_modules

4. 检查tsconfig.json配置 #

确保tsconfig.json的compilerOptions里包含正确的配置：

{
  "compilerOptions": {
    "target": "ES5",
    "lib": ["ES2015", "DOM"],
    "module": "ES2015",
    "moduleResolution": "node"
  }
}

关于空白项目测试的补充 #

你提到空白项目测试没问题，这就说明问题出在现有项目的依赖或配置上。按照上面的步骤逐一排查现有项目的TypeScript版本、@angular/core版本，再清理缓存，基本就能解决这个问题。我当时就是先升级了TS版本，清完缓存后错误就消失了！

内容的提问来源于stack exchange，提问作者David Dal Busco