Trying to make Angular dependency injection work

My Angular dependencies aren't working and I don't know why. All the resources I've seen indicate that this should work:

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

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

That line with the constructor always gives me this browser error: Error: NG0202: This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid. It's not specific to ActivatedRoute; I've tried this syntax with other dependencies and it happened with all of them.

My thought is that, if the Angular code is right, the problem lies in how my code is being loaded. I'm using jsbundling-rails and esbuild. This is my tsconfig.json:

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

It'd be great if someone knew how to fix this, but I'm also trying something else to get around it. I saw another question where someone was getting similar errors while using Webpack. He said he got it to work by "using the @Inject decorator in the component constructor." I couldn't make it compile using the syntax he had:

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

This, on the other hand, does compile:

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

But then the value of this.route isn't an ActivatedRoute object, it's this stock function from the Angular decorators code: function ParamDecorator(cls, unusedKey, index) { ... }. I tried other ways of phrasing it and got these errors:

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)

That last one is right from the Angular docs but clearly I'm doing something bizarrely wrong. What am I supposed to do with these? All I want is usable dependencies ;_;


  • Alright this is weird but remember how I said this didn't work:

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

    Well it does work, VSCode just says it doesn't. I'm not sure how to tell VSCode it's wrong, but I guess that's a better problem to have.