Angular 14运行触发Uncaught (in promise): NullInjectorError错误求助

运行Angular 14应用时直接触发NullInjectorError，报错前未执行特定自定义函数，相关代码与错误日志如下：

app.module.ts 代码 #

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
import { RouterModule } from '@angular/router'
import { BrowserModule } from '@angular/platform-browser'

import { ComponentsModule } from './components/components.module'
import { AppComponent } from './app.component'
import { HttpClientModule } from '@angular/common/http'
import { CommonModule } from '@angular/common'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes), ComponentsModule, HttpClientModule, CommonModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

控制台错误信息（翻译后） #

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(n)[n -> n -> n -> n -> n]: 
  NullInjectorError: 找不到n的提供者！
NullInjectorError: R3InjectorError(n)[n -> n -> n -> n -> n]: 
  NullInjectorError: 找不到n的提供者！
    at zd.get (:1:287700)
    at Yd.get (:1:290380)
    at Yd.get (:1:290380)
    at Yd.get (:1:290380)
    at sm (:1:274936)
    at Object.Hn (:1:275037)
    at n.ɵfac [as factory] (:1:172431)
    at Yd.hydrate (:1:291761)
    at Yd.get (:1:290332)
    at Yd.get (:1:290380)
    at Fe (:1:138605)
    at Fe (:1:138097)
    at :1:139488
    at q.invokeTask (:1:129092)
    at Object.onInvokeTask (:1:343929)
    at q.invokeTask (:1:129012)
    at q.runTask (:1:124085)
    at xe (http://localhost:4200/polyfills.js:1:131522) {rejection: NullInjectorError: R3InjectorError(n)[n -> n…> n]: 
  NullInjectorError: 找不到提供者…, promise: N, zone: q, task: q, stack: 'Error: Uncaught (in promise): NullInjectorErr…(http://localhost:4200/polyfills.js:1:131522)', …}

排查与解决方案 #

• 修复路由配置缺失问题：代码中RouterModule.forRoot(routes)的routes变量未定义，需补充路由数组定义，例如：

  import { Routes } from '@angular/router';
  
  const routes: Routes = [
    // 你的路由配置项
  ];
  

• 查看真实错误信息：当前错误日志是压缩混淆后的，变量名n无法定位具体依赖。修改angular.json中对应项目的optimization为false，重新运行应用，即可看到具体是哪个服务/类缺少提供者。
• 检查ComponentsModule的依赖：如果ComponentsModule中声明的组件或服务需要依赖注入，需确保这些依赖已在ComponentsModule的providers数组中注册，或者通过providedIn: 'root'标记为全局服务。
• 移除冗余导入：BrowserModule已经包含CommonModule的功能，无需在imports中重复导入CommonModule，可直接删除该导入项。

内容的提问来源于stack exchange，提问作者凯文Beno