PrimeNg p-tabMenu invisible, shown as size 0x17px in Firefox

Question

When trying to display a p-tabMenu element in the browser, nothing is shown (white screen). Another PrimeNg element, p-dropdown, is displayed when p-tabMenu is not in the html-File, if both are present both become invisible. When checking the element in the Firefox dev-tools inspector, the element is shown to be size 0x19 pixels. When changing the css with height or min-height values, these values are displayed in Firefox but the element stays invisible.

Complete html-Code:

<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-dropdown>
<p-tabMenu [model]="gfg"></p-tabMenu>

Component.ts-Code:

import {Component, OnInit} from '@angular/core';
import {MenuItem, PrimeNGConfig} from 'primeng/api';

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

  cities: City[];
  selectedCity: City;
  gfg: MenuItem[];

  constructor() {
    this.cities = [
      {name: 'New York', code: 'NY'},
      {name: 'Rome', code: 'RM'},
      {name: 'London', code: 'LDN'},
      {name: 'Istanbul', code: 'IST'},
      {name: 'Paris', code: 'PRS'}
    ];
    this.selectedCity={name: 'New York', code: 'NY'};
    this.gfg = [
      {label: 'HTML'},
      {label: 'AngularJS'},
      {label: 'ReactJS'},
      {label: 'PrimeNG'}
    ];
  }

  ngOnInit() {
  this.gfg = [
  {label: 'HTML'},
  {label: 'AngularJS'},
  {label: 'ReactJS'},
  {label: 'PrimeNG'}
];
  }
}

interface City {
  name: string,
  code: string
}

styles.css includes:

@import '~primeicons/primeicons.css';
@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/saga-blue/theme.css';

I followed PrimeNg setup closely from https://www.primefaces.org/primeng/#/setup and the dropdown menu on its own works. I tested changing some css values but no luck. I don't even know where to begin with this. I appreciate any help, i already spent many hours trying to fix this.

Answer 1

Although i did not find the source of the issue, it may be related to some problems in the underlying Angular project structure. After creating a new project, the code executes without problems