I'm encountering an issue while trying to run my Angular project.
X [ERROR] NG8001: 'router-outlet' is not recognized: If 'router-outlet' is an Angular component, please ensure it is included in this module. If 'router-outlet' is a Web Component, add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]
Below is the code in app.component.html:
<router-outlet></router-outlet>
And here is the content of app.component.ts:
import {Component, OnInit} from '@angular/core';
import {Router, RouterOutlet} from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent implements OnInit{
title = 'Docs';
constructor(private _router: Router) {
}
ngOnInit() {
this._router.navigate(['upload-pdf']).then(r=>console.log(r))
}
}
Additionally, here is the information from app-routing.module.ts:
import { NgModule } from '@angular/core';
import {RouterModule, RouterOutlet, Routes} from '@angular/router';
import {AppComponent} from "./app.component";
import {PdfComponent} from "../pdf/pdf.component";
import {UploadPdfComponent} from "../upload-pdf/upload-pdf.component";
export const routes: Routes = [
{ path: '', component: AppComponent },
{ path: 'pdf', component: PdfComponent},
{ path: 'upload-pdf', component: UploadPdfComponent},
{ path: '**', component: AppComponent },
]
@NgModule({
imports: [RouterModule.forRoot(routes), RouterOutlet],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Further, here is the code from app.module.ts:
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import {PdfComponent} from "../pdf/pdf.component";
import {UploadPdfComponent} from "../upload-pdf/upload-pdf.component";
import {FormsModule} from "@angular/forms";
import {MatFileUploadComponent, MatFileUploadModule, MatFileUploadQueueComponent} from "angular-material-fileupload";
import {RouterOutlet} from "@angular/router";
import {AppComponent} from "./app.component";
@NgModule({
declarations: [
AppComponent,
PdfComponent,
UploadPdfComponent,
MatFileUploadComponent,
MatFileUploadQueueComponent
],
imports: [
CommonModule,
AppRoutingModule,
FormsModule,
MatFileUploadModule,
RouterOutlet
],
exports:[
AppComponent
]
})
export class AppModule { }
Lastly, here is app.config.ts:
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app-routing.module';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes)]
};
The error disappeared when the component was made standalone. Are there any other solutions to resolve this issue?