Sharing specific component between anglar-parcel and angular app while using Single SPA

Question

I have set up two apps: the angular-parcel app and the other an angular app and I mount both apps in the root app of the single spa. Next, I have mounted the angular-parcel app within the other angular app by using a single-spa like below in the angular-parcel "main.single-spa.ts" file.

import { enableProdMode, NgZone } from '@angular/core';
        import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

        import { AppModule } from './app/app.module';
        import { environment } from './environments/environment';
        import { singleSpaPropsSubject } from './single-spa/single-spa-props';
        import { ParcelModuleModule } from './app/parcel-module/parcel-module.module';
        if (environment.production) {
          enableProdMode();
        }
        const lifecycles = singleSpaAngular({
          bootstrapFunction: (singleSpaProps) => {
            return platformBrowserDynamic().bootstrapModule(AppModule);
          },
          template: '<app-parcel />',
          NgZone,
        });
        export const name = 'angular-parcel';
        export const bootstrap = lifecycles.bootstrap;
        export const mount = lifecycles.mount;
        export const unmount = lifecycles.unmount;

And after this, I mount this app angular like below in app.component.ts

       import { Component } from '@angular/core';
        import { mountRootParcel } from 'single-spa';
        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.scss']
        })
        export class AppComponent  {
          title = 'angular-app';
          mountRootParcel = mountRootParcel;
          parcelProps = { customProp1: 'Parent prop1' };
          target = document.body;

          async ngconfig() {
            return (window as any).System.import('@dist/angular-parcel');
          }


          ngparcelMounted():void {

            console.log('Angular parcel mounted');
          }

        }

In html app.component.html

         <parcel
          [config]="ngconfig"
          [mountParcel]="mountRootParcel"
          [customProps]="parcelProps"
          wrapWith="h1"
          [onParcelMount]="ngparcelMounted"
          [appendTo]="target"
          domElement="app-sub-parcel"
          ></parcel>

in app.module.ts

        import { NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';
        import { AppRoutingModule } from './app-routing.module';
        import { ParcelComponent } from 'single-spa-angular/parcel';
        import { AppComponent } from './app.component';

        @NgModule({
          declarations: [AppComponent],
          imports: [BrowserModule, AppRoutingModule, ParcelComponent],
          providers: [],
          bootstrap: [AppComponent],
        })
        export class AppModule {}

Now what I want is like I have more than one component in my angular-parcel app's AppModule By default, it's showing the first component of my angular app but I want access to other components as well in my angular app condition based.