I'm new to Angular (version 17) and encountered an error: ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_LoginPageComponent])[function(options) { -> function(options) { -> function(options) { -> function(options) { -> function(options) {]: [1] NullInjectorError: No provider for function(options) {! The error occurs when trying to add private router: Router to the constructor() in login-page.component.ts.
login-page.component.ts
import { CommonModule} from '@angular/common';
import { Component, OnInit} from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuthService } from '../shared/layouts/services/auth.service';
import { Subscription } from 'rxjs';
import { Router } from 'express';
@Component({
selector: 'app-login-page',
standalone: true,
imports: [ReactiveFormsModule, CommonModule],
templateUrl: './login-page.component.html',
styleUrl: './login-page.component.css'
})
export class LoginPageComponent implements OnInit{
form : FormGroup
aSub: Subscription
constructor(private auth: AuthService, private router: Router) {
}
ngOnInit(): void {
this.form = new FormGroup({
email: new FormControl(null, [Validators.email, Validators.required]),
password: new FormControl(null, [Validators.minLength(6), Validators.required])
})
}
onSubmit() {
this.form.disable()
this.aSub = this.auth.login(this.form.value).subscribe({
next: (result) => {
},
error: (error) => {
console.log(error)
this.form.enable()
}
})
}
}
app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideClientHydration(), provideHttpClient(withFetch())]
};
auth.service.ts
import { Injectable } from "@angular/core";
import { User } from "../interfaces";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(private http: HttpClient) {
}
register() {
}
login(user: User): Observable<{token: string}> {
return this.http.post<{token: string}>('http://localhost:5000/api/auth/login', user)
}
}
Please assist me in resolving the issue. Thank you!