How to register nested routes on an Angular standalone component?

I need to migrate the component/view below (with nested routes) from NgModule to standalone

Angular docs for routing do not mention standalone, and standalone docs only show how to route to a standalone component

@Component({
selector: "app-account",
templateUrl: "./account.component.html",
styleUrls: ["./account.component.scss"],
})
export class AccountComponent {}

export const AccountRoutes: Routes = [
{
path: "",
component: AccountComponent,
children: [
{
path: "login",
component: LoginComponent,
},
{
path: "register",
component: RegisterComponent,
},
{
path: "confirm",
component: ConfirmComponent,
},
],
},
];

@NgModule({
imports: [CommonModule, RouterModule.forChild(AccountRoutes)],
declarations: [AccountComponent, LoginComponent, RegisterComponent, ConfirmComponent],
})
export class AccountModule {}


I tried provideRouter like below, but it seems it can only be used with bootstrapApplication, with the error: Type 'EnvironmentProviders' is not assignable to type 'Provider'

@Component({
selector: 'app-account',
standalone: true,
imports: [CommonModule, RouterOutlet],
providers: [
provideRouter(routes)
],
templateUrl: './account.component.html',
styleUrls: ['./account.component.scss'],
})
export class AccountComponent {}

Continue reading...