Where to import child route in standalone components

I'm trying to create a page that has 2 different route.

I'm trying to import the RouterModule in my standalone component, but do get

Type 'ModuleWithProviders' is not assignable to type 'readonly any[] | Type'.
​

My code

import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'

export const routes: Routes = [
{
path: 'first',
loadComponent: () => import('./first/first.component').then((m) => m.FirstComponent),
},
{
path: 'second',
loadComponent: () => import('./second/second.component').then((m) => m.SecondComponent),
},
]

@Component({
selector: 'app-home',
standalone: true,
imports: [
CommonModule,

// Router
RouterModule.forChild(routes), // Error > Type 'ModuleWithProviders<RouterModule>' is not assignable to type 'readonly any[] | Type<any>'.
],
template: `<p>home works!</p>`,
styleUrl: './home.component.css',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HomeComponent {}



Does somebody have an Idea ?

Note


This is a .forChild() as HomeComponent is being imported inside app.module.ts which have the .forRoot()

Continue reading...