NG8001: 'router-outlet' is not a known element:

i was having a problem at first I was trying to log in to connect with main when I logged in, but while I moved, I asked for help pro gpt and now an error appeared that I could not solve in any way, anyone have any idea?

NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

src/app/app.component.ts:5:13:
5 │ template: '<router-outlet></router-outlet>',
╵ ~~~~~~~~~~~~~~~


Based on that error code and the code, does anyone have any idea what might happen? could it be some package I didn't download or is it just Angular that's screwed? Here the code

app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';
import { RouterModule } from '@angular/router';

@NgModule({
declarations: [
AppComponent,
LoginComponent,
MainComponent,
AppRoutingModule,
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule
],
bootstrap: [AppComponent],
})
export class AppModule {}


App.component

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

@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>',
styleUrls: ['./app.component.css'],
})
export class AppComponent {}


app routing:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';

const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'main', component: MainComponent },
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: '**', redirectTo: 'login' },
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}


app.component.html:


<router-outlet></router-outlet>


login component:

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
email: string = '';
password: string = '';
rememberMe: boolean = false;

constructor(private authService: AuthService, private router: Router) {}

onSubmit() {
this.authService.login(this.email, this.password).subscribe(
(response) => {
if (response.token) {
localStorage.setItem('authToken', response.token);
alert('Login bem-sucedido!');
this.router.navigate(['/main']);
} else {
alert('Erro de login! Verifique suas credenciais.');
}
},
(error) => {
alert('Erro de login! Verifique suas credenciais.');
console.error(error);
}
);
}

// Método para redefinir senha
onForgotPassword() {
alert('Instruções para redefinir sua senha foram enviadas para seu e-mail.');
}
}


main.component:

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

@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css'],
})
export class MainComponent {
constructor(private router: Router) {}

logout() {
localStorage.removeItem('authToken');
console.log('Logout iniciado, redirecionando para login...');
this.router.navigate(['/login']);
}
}

Continue reading...