Angular Standalone not Rendering in ngx-bootstrap/tabs

Question

Greeting Programs:

My Angular webpage uses dynamic tabs (ngx-bootstrap/tabs) to display different pages. I plan to migrate to @defer. I understand the first step in @defer is to convert components to standalone.

I have converted a component to standalone. When I click the button to dynamically load this component into a new tab, the tab is created, but the content does not appear. Prior to converting to standalone, this worked without any problems.

Particulars

• Recently upgraded to Angular 17.
• ng 17.0.5
• Node 20.10.0
• ngx-bootstrap 11.0.2

I am aware that ngx-bootstrap 11 has not been validated against Angular 17 (https://www.npmjs.com/package/ngx-bootstrap#compatibility) and I applied overrides to use them together (https://github.com/valor-software/ngx-bootstrap/issues/6618).

I do not know if this compatibility is the problem, or if I have used the standalone wrong.

Here is the original component code:

const id = "mwx-pvgd//mwx-about/";

import { Component, OnInit } from '@angular/core';
import { faFilePdf, faDiceD20 } from '@fortawesome/free-solid-svg-icons';
import { faFacebookSquare } from '@fortawesome/free-brands-svg-icons';

@Component({
  selector: 'app-mwx-about',
  templateUrl: './mwx-about.component.html',
  styleUrls: ['./mwx-about.component.css']
})
export class MwxAboutComponent implements OnInit {

  faFilePdf = faFilePdf;
  faDiceD20 = faDiceD20;
  faFacebookSquare = faFacebookSquare;

  constructor() { }

  ngOnInit() {
  }

}

Here is how it appears after I converted it to singleton:

const id = "mwx-pvgd//mwx-about/";

import { Component, OnInit } from '@angular/core';
import { faFilePdf, faDiceD20 } from '@fortawesome/free-solid-svg-icons';
import { faFacebookSquare } from '@fortawesome/free-brands-svg-icons';

import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@Component({
  selector: 'app-mwx-about',
  templateUrl: './mwx-about.component.html',
  styleUrls: ['./mwx-about.component.css'],
  standalone: true,
  imports: [CommonModule, FontAwesomeModule]
})
export class MwxAboutComponent implements OnInit {

  faFilePdf = faFilePdf;
  faDiceD20 = faDiceD20;
  faFacebookSquare = faFacebookSquare;

  constructor() { }

  ngOnInit() {
  }

}

I also removed the component from app.module.ts.

In the component (not a standalone) where I open this standalone component, I make the following import:

import { MwxAboutComponent } from '@app/mwx-about/mwx-about.component';

To reiterate, the program builds and executes without any errors. When the new tab is created, the tab and its frame are created, but the content of the standalone component does not render in the frame.

Any insights you might have would be appreciated.

Thanks, Mark