Angular首次访问页面空白报NullInjectorError: No provider for Kn求助

• 先定位Kn对应的原始服务类
  Angular生产构建会混淆类名，Kn是压缩后的名称，无法直接对应代码中的类。解决方法：

  • 用开发环境启动应用（ng serve），开发模式不会混淆类名，此时复现错误就能看到原始类名；
  • 或临时关闭生产构建的脚本混淆：修改angular.json中build配置的optimization.scripts为false，再执行ng build --prod，启动构建后的应用看错误信息，就能得到原始类名。

• 检查服务的提供者配置
  找到原始类后，确认该服务的注入配置：

  • 如果是全局服务，确保类上添加了@Injectable({ providedIn: 'root' })装饰器；
  • 如果是模块级服务，要在对应的模块（或根模块）的providers数组中声明；
  • 若为懒加载模块的服务，检查懒加载模块是否在首次访问时已完成加载，避免服务未注册就被注入。

• 排查首次加载的异步依赖问题
  首次加载空白通常和初始化阶段的异步操作有关：

  • 检查APP_INITIALIZER中是否有异步加载逻辑，导致服务注入时机早于依赖初始化完成；
  • 查看路由守卫、路由解析器中是否用到了该服务，确认路由初始化时服务已被正确提供。

• 清理升级残留
  升级Angular后仍有问题，执行以下操作：

  • 删除node_modules和package-lock.json（Windows：rmdir /s/q node_modules && del package-lock.json；Mac/Linux：rm -rf node_modules package-lock.json）；
  • 重新执行npm install，确保依赖完全更新。

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