Single Spa Angular not working - empty page

Question

I created an single spa angular application with below commands

ng new my-angular-app --routing --prefix my-angular-app cd my-angular-app

ng add single-spa-angular

Next, go to your app-routing-module.ts and add a provider for your APP_BASE_HREF. We will discuss the significance of APP_BASE_HREF in a single-spa angular applicaton later.

providers: [{ provide: APP_BASE_HREF, useValue: '/' }]

Add ** route specified for EmptyRouteComponent

{ path: '**', component: EmptyRouteComponent }

Ran

"serve:single-spa:my-angular-app": "npm install ng s --project my-angular-app --disable-host-check --port 4200 --deploy-url http://localhost:4200/ --live-reload false

which is npm run serve:single-spa:my-angular-app

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { APP_BASE_HREF } from '@angular/common';
import { EmptyRouteComponent } from './empty-route/empty-route.component';

@NgModule({
  declarations: [
    AppComponent,
    EmptyRouteComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

// AppComponent

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

@Component({
  selector: 'poc-angular-root',
  template:`Hello From AppComponent`
})
export class AppComponent {
  title = 'poc-angular';
}

main.single-spa.ts

import { enableProdMode, NgZone } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Router, NavigationStart } from '@angular/router';

import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';


import { singleSpaPropsSubject } from './single-spa/single-spa-props';
import { AppModule } from './app/app.module';
import { environment } from './environment/environment';

if (environment.production) {
  enableProdMode();
}

console.log('here');

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<poc-angular-root />',
  Router,
  NavigationStart,
  NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

But its showing an empty page

What could be the reason.

I want to run and see the angular app separately.