CODEWITHSUNDEEP
angulartypescriptangular15router-outletangular-standalone-components
Ahmad
Ahmad

Reputation: 27

Angular 15 - Get error for RouterOutlet in standalone component

I have an error with running the Angular project.

X [ERROR] NG8001: 'router-outlet' is not a known element: If 'router-outlet' is an Angular component, then verify that it is part of this module. 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]

Here is app.component.html:

<router-outlet></router-outlet>

Here is 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))
  }
}

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

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

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

This error disappeared when turning the component to standalone. How this error can be solved by another solution?

Upvotes: 0

Views: 150

Answers (1)

Yong Shun
Yong Shun

Reputation: 51315

The error mentioned informs that you need to import the RouterModule in the AppComponent.

import {Router, RouterModule} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  imports: [RouterModule]
})
export class AppComponent { }

And remove the imports of RouterOutlet in the AppRoutingModule and AppModule as it is unneeded.

For stand-alone components, you are allowed to import the RouterOutlet in the imports array.

import {Router, RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  imports: [RouterOutlet]
})
export class AppComponent { }

Upvotes: 2

Related Questions