Visual Studio 2017中运行Angular 5 SPA报错求助

我之前也碰到过这个棘手的注入错误，折腾了好一会儿才搞定，给你分享几个靠谱的解决方向：

1. 检查是否误用了自定义Document注入令牌 #

这个错误的核心是InjectionToken DocumentToken无法被正确解析，大概率是你或者某个依赖库没有用Angular官方的DOCUMENT注入令牌。

正确的做法是使用@angular/common提供的标准令牌：

// 在组件/服务中导入并注入
import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';

constructor(@Inject(DOCUMENT) private document: Document) {}

如果项目里存在自定义的InjectionToken('DocumentToken')，赶紧替换成官方的DOCUMENT，这是最常见的触发原因。

2. 修复Angular Universal（SSR）的服务器端配置 #

如果你的SPA启用了服务器端渲染（.NET Core 2的SPA模板默认可能带SSR），服务器端是没有浏览器的Document对象的，必须手动提供模拟实现：

在app.server.module.ts中添加DOCUMENT的服务器端提供者：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { DOCUMENT } from '@angular/common';

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  providers: [
    {
      provide: DOCUMENT,
      useValue: {
        location: { href: 'http://localhost:5000' }, // 模拟基础location属性
        // 根据需求添加其他需要的Document属性
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

3. 排查第三方依赖的兼容性 #

有些老的第三方库可能自定义了DocumentToken来注入Document对象，和Angular 5的注入系统不兼容。你可以：

• 检查package.json中的依赖版本，把相关库更新到支持Angular 5的最新版
• 如果找不到兼容版本，尝试替换为其他功能类似的库

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

有时候缓存会导致依赖解析异常，执行以下命令彻底清理并重建项目：

# 清理Angular依赖和缓存
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

# 清理.NET Core项目缓存并重建
dotnet clean
dotnet restore
dotnet build

这个错误本质是依赖注入时，令牌对应的实例无法被正确创建，尤其是在服务器端渲染场景下，浏览器环境的对象缺失会直接触发这类异常。按照上面的步骤排查，基本能解决问题。

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