NG8001：“路由器插座”不是已知元素：

Question

我一开始遇到了问题，我在登录时尝试登录以与main连接，但是当我移动时，我向gpt寻求帮助，现在出现了一个错误，我无法以任何方式解决，任何人都有有什么想法吗？

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>',
        ╵              ~~~~~~~~~~~~~~~

根据该错误代码和代码，有人知道会发生什么吗？可能是我没有下载某个软件包，还是只是 Angular 搞砸了？ 代码在这里

应用程序模块：

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 {}

应用程序组件

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>

登录组件：

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.');
  }
}

主要组件：

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']);
  }
}

Answer 1

您必须从声明数组中删除

AppRoutingModule

，这可能就是问题所在。

AppRoutingModule

已导出

RouterModule

，因此无需再次导入。

@NgModule({
  declarations: [
    AppComponent,  
    LoginComponent, 
    MainComponent, 
     // AppRoutingModule, // <- remove this!
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, 
    // RouterModule // <- remove this!
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}