Загрузка страницы бросает "NG8001: 'Router-Outlet' не является известным элементом" ⇐ Html

[Anonymous]

У меня проблема: сначала я пытался войти в систему, чтобы связаться с Main, но пока я переехал, появилась следующая ошибка, которую я не смог решить каким-либо образом.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: '',
╵ ~~~~~~~~~~~~~~~
< /code>
На основании этого кода ошибки и кода, кто -нибудь имеет представление о том, что может произойти? Может ли это быть какой -то пакет, который я не загрузил, или это просто угловой?app.module.ts:
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 {}
< /code>
app.component.ts:
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: '',
styleUrls: ['./app.component.css'],
})
export class AppComponent {}
< /code>
app-routing.module.ts:
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 {}
< /code>
app.component.html:

< /code>
login.component.ts:
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('Logged in successfully!');
this.router.navigate(['/main']);
} else {
alert('Couldn\'t login! Please check your credentials.');
}
},
(error) => {
alert('Couldn\'t login! Please check your credentials.');
console.error(error);
}
);
}

// Method to reset the password
onForgotPassword() {
alert('Instructions to reset your password have been sent to your email.');
}
}
< /code>
main.component.ts:
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('Logging out, redirecting to login...');
this.router.navigate(['/login']);
}
}


Подробнее здесь: https://stackoverflow.com/questions/792 ... wn-element