typescript - 尝试让 Angular 的依赖注入工作

我的 Angular 依赖项无法工作，我不知道为什么。我所看到的所有资源都表明这应该可行：

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

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  constructor (private route: ActivatedRoute) {} // I'm the problem it's me
}

带有构造函数的那行代码总是给我这个浏览器错误：Error: NG0202: 由于参数列表中索引为 0 的依赖无效，这个构造函数与 Angular 依赖注入不兼容。 这不仅限于 ActivatedRoute；我尝试过使用其他依赖的这种语法，所有依赖都会出现这个问题。

我的想法是，如果 Angular 代码是正确的，问题出在我的代码是如何被加载的。我正在使用 jsbundling-rails 和 esbuild。这是我的 tsconfig.json：

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "baseUrl": "./"
  }
}

如果有人知道如何修复这个问题那就太好了，但我也在尝试其他方法来解决它。我看到另一个问题，有人在使用 Webpack 时遇到了类似的错误。他说他通过“在组件构造函数中使用 @Inject 装饰器”让它工作。我无法使用他提供的语法让它编译成功：

import { Inject } from '@angular/core';
...
export class AppComponent {
  constructor(@Inject(ActivatedRoute) private route: ActivatedRoute) {}
  // Decorators are not valid here. ts(1206)

另一方面，这个确实可以编译：

export class AppComponent {
  private route = Inject(ActivatedRoute);

但是 this.route 的值不是一个 ActivatedRoute 对象，而是来自 Angular 装饰器代码的这个默认函数：function ParamDecorator(cls, unusedKey, index) { ... }。我尝试了其他的表达方式，但得到了这些错误：

export class AppComponent {
  private route = @Inject(ActivatedRoute);
  // Expression expected. ts(1109)

@Injectable({ providedIn: 'root' })
export class AppComponent {
  private route = inject(ActivatedRoute);
  // Cannot find name 'inject'. Did you mean 'Inject'? ts(2552)

最后一个来自 Angular 文档，但显然我做错了什么奇怪的事情。我应该怎么处理这些？我只想要可用的依赖 ;_;

答案＃1

好吧，这很奇怪，但还记得我说过这个不起作用吗：

constructor(@Inject(ActivatedRoute) private route: ActivatedRoute) {}

嗯，它确实能工作，VSCode 只是说它不能。我不确定如何告诉 VSCode 它错了，但我猜这是一个更好的问题。

答案＃2

错误信息

参数列表中索引为 0 的依赖项无效

表明 Angular 已经理解这个参数是它应该注入的“依赖”，但这个特定的依赖在某种程度上是“无效的”。

如果你在 Angular 文档中搜索错误代码 NG0201，你会发现 NG0201：未找到 {token} 的提供者。

也就是说，这个错误信息是在告诉你：Angular 说“我找不到 ActivatedRoute？我应该从哪里得到它？”。最可能的原因是你忘记导入 RouterModule。

顺便说一下，将 ActivatedRoute 注入到 AppComponent 没有意义。其文档中说：

ActivatedRoute
提供有关与在出口中加载的组件相关的路由的信息访问。

由于 AppComponent 没有加载在 outlet 中，并且在 AppComponent 存在期间路由将会改变，即使注入了 ActivatedRoute，它也将是 AppComponent 初次加载时的活动路由，而不是当前活跃的路由。