My Angular dependencies seem to be causing issues and I'm not sure why. All the guides I've checked suggest that this should work:
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) {} // It appears the issue lies here
}
Whenever I include that constructor line, I encounter 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.I suspect that if my Angular code is correct, then the problem might arise from how my code is being loaded. I'm utilizing jsbundling-rails and esbuild for this purpose. Below is a snippet of my tsconfig.json:
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"baseUrl": "./"
}
}
It would be really helpful if someone could provide insights on resolving this issue. In the meantime, I'm also exploring an alternative approach to circumvent it. I came across another query where a similar error was encountered while using Webpack. The suggestion mentioned involved "using the @Inject decorator in the component constructor." Despite attempting to implement this, I couldn't get it to compile using the provided syntax:
import { Inject } from '@angular/core';
...
export class AppComponent {
constructor(@Inject(ActivatedRoute) private route: ActivatedRoute) {}
// Decorators are not valid here. ts(1206)
However, the following does compile:
export class AppComponent {
private route = Inject(ActivatedRoute);
Unfortunately, the value assigned to this.route isn't an ActivatedRoute object but rather a generic function from the Angular decorators code:
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)
The last example is directly from the Angular documentation, yet evidently I am missing something crucial. How should I proceed in handling these situations? My goal is simply to have functional dependencies ;_;