html - NG8001: 'router-outlet' is not a known element: - Stack Overflow

admin管理员组

文章数量:1122832

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/appponent.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 './appponent';
import { LoginComponent } from './login/loginponent';
import { MainComponent } from './main/mainponent';
import { RouterModule } from '@angular/router';

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

Appponent

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

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

app routing:

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

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

appponent.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: './loginponent.html',
  styleUrls: ['./loginponent.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.');
  }
}

mainponent:

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

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

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

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

• html
• angular
• angularjs
• typescript
• angular-ui-router

Share Improve this question Follow asked Nov 23, 2024 at 4:56 Allan JoséAllan José 1111 silver badge11 bronze badge 2

• please share main.ts file – Naren Murali Commented Nov 23, 2024 at 5:02
• are you using Angular v19 ? – Matthieu Riegler Commented Nov 23, 2024 at 10:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You have to remove AppRoutingModule from the declarations array, that might be the problem.

The AppRoutingModule already exports RouterModule so there is no need to import it again.

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

Also delete the .angular (cache) folder and rerun npm run start.

本文标签： htmlNG8001 39routeroutlet39 is not a known elementStack Overflow