I’ve just started a new Angualr project. I’ve been trying to use a shared module in Angular to import and then export primeng modules to both the app.module.ts as well as a consumer-site.module.ts. Primeng is working in the component declared in the app.module.ts but not the consumer-site.module.ts component that I have created. I’m not sure why it works in one and not the other.

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { AppRoutingModule } from '../app-routing.module';

//primeng
import {InputTextModule} from 'primeng/inputtext';
import {InputTextareaModule} from 'primeng/inputtextarea';
import {DropdownModule} from 'primeng/dropdown';
import {ButtonModule} from 'primeng/button';
import {EditorModule} from 'primeng/editor';

const primng_modules = [
  InputTextModule,
  InputTextareaModule,
  DropdownModule,
  ButtonModule,
  EditorModule
]

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
  ],
  exports: [
    ...primng_modules,
    CommonModule,
    BrowserAnimationsModule,
    BrowserModule,
    ReactiveFormsModule,
    AppRoutingModule,
    RouterModule
  ]
})
export class SharedModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AddEditQuestionComponent } from './pages/add-edit-question/add-edit-question/add-edit-question.component';


import { SharedModule } from './shared/shared.module';


@NgModule({
  declarations: [
    AppComponent,
    AddEditQuestionComponent,
  ],
  imports: [
    SharedModule
  ],
  exports: [
    AddEditQuestionComponent,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

consumer-site.module.ts

import { NgModule } from '@angular/core';
import { ShellComponent } from './shell/shell.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [
    ShellComponent
  ],
  imports: [
    SharedModule,
  ]
})
export class ConsumerSiteModule { }

Here are the attributes in the angular.json folder that were modified for primeng:

"styles": [
              "src/styles.scss",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeflex/primeflex.css",
              "node_modules/quill/dist/quill.core.css",
              "node_modules/quill/dist/quill.snow.css"
            ],
            "scripts": [
              "node_modules/quill/dist/quill.js"
            ]

Primeng works inside AddEditQuestionComponent declared in app.module.ts but not ShellComponent declared in ConsumerSiteModule. Even if I directly import a primeng module into the ConsumerSiteModule, primeng still doesn’t work. So it seems like Primeng isn’t accessible there for some reason. Why would these be if the Shared, App, and ConsumerSite modules are within the same app/src folder?

>Solution :

have a good time

One thing I noticed was that you didn’t include the ConsumerSite.module in the AppModule

You need to import the ConsumerSite Module itself into the AppModule

I hope I could help you