import primeng from shared. Module for better organization

[mC8]

I am using so many of these primeng components that I would like to move all the imports out of my main app.module.ts. However when I create a shared.module.ts, and import the shared module into the main app.mopdule everything stops working.

shared.module.ts

Code: Select all

import { NgModule } from '@angular/core';
import { CalendarModule } from 'primeng/calendar';
@NgModule({
  declarations: [
    
  ],
  imports: [
    CalendarModule
  ]
})
export class SharedModule {}

app.module.ts

Code: Select all

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    SharedModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

export class AppModule { }

[jimmy@eve.co]

You would also need to export the module

Code: Select all

@NgModule({
  declarations: [
    
  ],
  imports: [
    CalendarModule
  ],
  exports: [
    CalendarModule,
  ]
})

[PhilHuhn]

Hey, I here ya. I use a solution that I learned from watching some PluralSight training videos back in the 2.0 days. All the solution is an exported array: This is my current set of arrays:

Code: Select all

// ===========================================================================
// File: APP.MODULE-PRIMENG.ts
import { SharedModule, Header, Footer } from 'primeng/api';
import { TableModule } from 'primeng/table';
import { Dialog, DialogModule } from 'primeng/dialog';
import { ConfirmDialog, ConfirmDialogModule } from 'primeng/confirmdialog';
import { DropdownModule } from 'primeng/dropdown';
import { MenubarModule } from 'primeng/menubar';
import { ButtonModule } from 'primeng/button';
import { ListboxModule } from 'primeng/listbox';
import { RadioButtonModule } from 'primeng/radiobutton';
import { PanelModule } from 'primeng/panel';
import { CalendarModule } from 'primeng/calendar';
import { AccordionModule } from 'primeng/accordion';
import { TabViewModule } from 'primeng/tabview';
import { FocusTrapModule } from 'primeng/focustrap';
import { CheckboxModule } from 'primeng/checkbox';
import { TreeTableModule } from 'primeng/treetable';
import { TreeModule } from 'primeng/tree';
//
export const APP_PRIMENG_MODULE = [
	SharedModule,
	TableModule,
	DialogModule,
	ConfirmDialogModule,
	DropdownModule,
	MenubarModule,
	ButtonModule,
	ListboxModule,
	RadioButtonModule,
	PanelModule,
	AccordionModule,
	CalendarModule,
	TabViewModule,
	FocusTrapModule,
	CheckboxModule,
	TreeTableModule,
	TreeModule
];
//
export const APP_PRIMENG_COMPONENTS = [
	Dialog,
	ConfirmDialog,
	Header,
	Footer
];
//
import { ConfirmationService } from 'primeng/api';
//
export const APP_PRIMENG_PROVIDERS = [
	ConfirmationService
];
// ===========================================================================

This is my app.module.ts:

Code: Select all

// ===========================================================================
// File: app.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
//
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GlobalModule } from './global/global.module';
import { APP_COMPONENTS } from './APP.COMPONENTS';
import { APP_PROVIDERS } from './APP.PROVIDERS';
import { APP_PRIMENG_MODULE, APP_PRIMENG_PROVIDERS } from './APP-PRIMENG';
//
@NgModule({
	declarations: [
		AppComponent,
		APP_COMPONENTS
	],
	imports: [
		CommonModule,
		GlobalModule,
		AppRoutingModule,
		APP_PRIMENG_MODULE
	],
	providers: [
		APP_PROVIDERS,
		APP_PRIMENG_PROVIDERS
	],
	bootstrap: [AppComponent]
})
export class AppModule { }
// ===========================================================================

The really cool part is you can use this exported array in your tests. So once you add a new PrimeNG feature, your test doesn't blowup.

Code: Select all

import { APP_PRIMENG_MODULE, APP_PRIMENG_COMPONENTS } from '../../APP-PRIMENG';
...
	beforeEach( waitForAsync( ( ) => {
		TestBed.configureTestingModule( {
			imports: [
				FormsModule,
				BrowserAnimationsModule,
				HttpClientModule,
				HttpClientTestingModule,
				APP_PRIMENG_MODULE
			],
			declarations: [
				ProjectTaskGridComponent,
				ProjectTaskDetailWindowComponent,
				TruncatePipe,
				APP_PRIMENG_COMPONENTS
			],
			providers: [
				BaseCompService,
				AlertsService,
				ConsoleLogService,
				ConfirmationService,
				{ provide: ProjectProjectTaskFakeService, useValue: projecttaskServiceSpy },
			]
		} );
		baseService = TestBed.inject( BaseCompService );
		alertService = baseService._alerts;
		consoleService = baseService._console;
		confirmService = baseService._confirmationService;
		TestBed.compileComponents( );
	} ) );