Angular项目使用ActivatedRoute时出现NG0204参数解析错误求助

问题描述 #

我昨天的项目还一切正常，今天更新Angular之后，执行ng serve就弹出了这个错误：

Error: NG0204: Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?).

at getUndecoratedInjectableFactory (core.mjs:9296:15)
at injectableDefOrInjectorDefFactory (core.mjs:9286:16)
at providerToFactory (core.mjs:9332:52)
at providerToRecord (core.mjs:9316:25)
at R3Injector.processProvider (core.mjs:9213:24)
at core.mjs:9041:59
at forEachSingleProvider (core.mjs:9387:13)
at forEachSingleProvider (core.mjs:9384:13)
at new R3Injector (core.mjs:9041:9)
at createInjectorWithoutInjectorInstances (core.mjs:10612:12)

IDE里也没有提示任何语法错误，我的模块代码是这样的：

import { Routes, RouterModule, ActivatedRoute } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    PropertyCardComponent,
    PropertyListComponent,
    NavBarComponent,
    AddPropertyComponent,
    PropertyDetailsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule,
    FormsModule
  ],
  providers: [ActivatedRoute],
  bootstrap: [AppComponent]
})

本来应该在空路径path: ''下显示房产列表，但现在直接报这个参数解析错误，问过ChatGPT也没解决，求帮忙！

解决方案 #

兄弟，问题出在你把ActivatedRoute加到模块的providers数组里了！

Angular的ActivatedRoute是路由专属的注入服务，它的实例是由Angular路由器模块自动创建和管理的，完全不需要你手动在providers里注册。你手动添加之后，Angular没办法解析它的构造函数参数，就会抛出这个NG0204错误。

解决步骤超简单：

• 打开你的模块文件（看起来是AppModule）
• 找到providers: [ActivatedRoute]这一行，把ActivatedRoute从数组里删掉
• 保存文件，重新执行ng serve

另外，如果你是在组件里需要使用ActivatedRoute，只需要在组件的构造函数里直接注入就行，比如：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

这样Angular会自动给你提供正确的ActivatedRoute实例，完全不用额外配置~

备注：内容来源于stack exchange，提问作者epigęsior