Angular组件添加路由参数时出现NG0202依赖注入错误求助

我想要创建一个使用路由参数的Angular组件，按照资料通过ActivatedRoute实现时，持续出现以下错误：

Error: NG0202: This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.
Please check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.

以下是完整的最小代码示例：

products.module.ts #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ProductsRoutingModule } from './products_routing.module';
import { ProductsComponent } from './products/products.component';
import { ProductDetailsComponent } from './product_details/product_details.component';


@NgModule({
  imports: [
    CommonModule,
    ProductsRoutingModule
  ],
  declarations: [
    ProductsComponent,
    ProductDetailsComponent
  ]
})
export class ProductsModule { }

products_routing.module.ts #

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

import { ProductsComponent } from './products/products.component';
import { ProductDetailsComponent } from './product_details/product_details.component';

const productRoutes: Routes = [
  {
    path: '',
    component: ProductsComponent,
    children: [ {
      path: 'details',
      component: ProductDetailsComponent
    } ]
  }
];

@NgModule({
  imports: [ RouterModule.forChild(productRoutes) ],
  exports: [ RouterModule ]
})
export class ProductsRoutingModule { }

products.component.ts #

import { Component } from '@angular/core';
import template from './products.component.html';

@Component({
  selector: 'app-products',
  template
})
export class ProductsComponent { }

products.component.html #

<h2>Products generally</h2>
<router-outlet></router-outlet>

product_details.component.ts #

import { Component } from '@angular/core';
import template from './product_details.component.html';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-details',
  template
})
export class ProductDetailsComponent {
  constructor (
    private route: ActivatedRoute
  ) { }
}

product_details.component.html #

<h3>Product details component</h3>

请问缺少了什么配置？我已尝试在Products模块中导入RouterModule，但无效果。是否可能是esbuild导致的问题？

这个NG0202错误的核心原因是组件模板的导入方式不符合Angular默认的元数据处理逻辑，导致DI系统无法正确识别ActivatedRoute的依赖类型。具体解决步骤如下：

1. 改用Angular标准的模板引用方式 #

将组件中import template from './xxx.component.html'的写法替换为templateUrl指定模板路径，这是Angular官方推荐的方式，无需额外构建配置：

修改products.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html'
})
export class ProductsComponent { }

修改product_details.component.ts：

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

@Component({
  selector: 'app-product-details',
  templateUrl: './product_details.component.html'
})
export class ProductDetailsComponent {
  constructor (
    private route: ActivatedRoute
  ) { }
}

2. （可选）如果坚持使用模板导入的构建方式 #

若你需要保留import template的写法，需在esbuild配置中添加HTML文件的loader，将其作为字符串导入：

// esbuild配置示例
require('esbuild').build({
  // 其他配置...
  loader: {
    '.html': 'text'
  }
});

但此方式属于非标准用法，容易引发元数据解析问题，不推荐。

3. 确认模块配置有效性 #

你的ProductsModule已经通过导入ProductsRoutingModule间接引入了RouterModule.forChild()，路由相关的服务（包括ActivatedRoute）已被正确注册，无需额外在ProductsModule中导入RouterModule。

完成上述修改后，Angular的DI系统就能正常识别ActivatedRoute的依赖类型，NG0202错误即可解决。

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