Angular 2.1.2升级至5.0.0遇StaticInjectorError问题求助

你在升级过程中遇到的这个错误，核心原因是Angular找不到DocumentToken这个注入令牌的提供者，下面是一步步的排查和解决思路：

1. 定位DocumentToken的来源 #

首先全局搜索你的项目代码，找到DocumentToken的定义位置——Angular核心库本身并没有这个令牌，它要么是你项目自定义的，要么来自某个第三方依赖：

• 如果是项目自定义的，你会找到类似这样的代码：

  import { InjectionToken } from '@angular/core';
  export const DocumentToken = new InjectionToken<Document>('Document');
  

• 如果是第三方依赖导致的，检查你使用的工具库/UI组件是否需要升级到兼容Angular 5的版本——Angular 2到5有不少API变更，旧版本的依赖很可能出现注入兼容问题。

2. 为DocumentToken添加提供者 #

如果是自定义的令牌，你需要在对应的NgModule的providers数组中注册它的提供者：

import { NgModule } from '@angular/core';
import { DocumentToken } from './path/to/your/token';

@NgModule({
  // ...其他模块配置
  providers: [
    // 注册DocumentToken的提供者，使用浏览器原生document对象作为注入值
    { provide: DocumentToken, useValue: document }
  ]
})
export class YourModule { }

3. 检查Angular依赖版本一致性 #

非CLI项目很容易出现依赖版本不统一的问题，打开package.json确认所有@angular/*开头的包（比如@angular/core、@angular/common、@angular/compiler等）版本都是5.0.0，不要混合Angular 2和5的版本。

4. 清理依赖缓存并重新构建 #

有时候缓存的依赖会导致奇怪的兼容性问题，执行以下命令清理后重新安装：

rm -rf node_modules package-lock.json
npm install

之后重新用webpack构建项目，看错误是否消失。

针对你的复现仓库的额外提示 #

由于你提供了最小复现仓库，建议先检查仓库中使用DocumentToken的组件/服务，确认对应的模块是否已经注册了该令牌的提供者。比如如果是在核心服务中注入了DocumentToken，就需要在AppModule中添加对应的provider配置。

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