Home > Software engineering >  Cannot render properly `<p-fieldset>` in angular with primeng
Cannot render properly `<p-fieldset>` in angular with primeng

Time:08-10

I'm completely new in angular and primeng. I'm doing a simple app (well, is a static web with different components) in which I use a router to render different components based on url. One of this components use the tag <p-fieldset> but I have not achieved to render it properly and the router doesn't work fine. If instead of that tag I use <p-card> changing the module import and deleting the <p-fieldset> everything works again. I'm working with Angular 14.1.0.

my_component.html:

<div >
    <p-card header="header 1">
        Content 1
    </p-card>
</div>

<!-- <div >
    <h5>Regular</h5>
    <p-fieldset legend="Header">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </p-fieldset>
</div> -->

my prime-ng.module.ts

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  exports:[
    FieldsetModule,
    CardModule,
  ]
})
export class PrimeNgModule { }

Module in which my component is:

@NgModule({
  declarations: [
    my_component
  ],
  imports: [
    CommonModule,
    PrimeNgModule,
  ],
  exports: [
    my_component
  ]
})
export class ContentModule { }

And my app.module.ts:

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

What am I doing wrong?

CodePudding user response:

You are missing this module

imports: [BrowserModule, BrowserAnimationsModule, FieldsetModule],

import all these 3 your code will work fine.

  • Related