While attempting to develop an Angular 9 library that incorporates Material and Formly modules, I am encountering difficulties in configuring it.
Within the library:
core-ui.module.ts
/**
* Angular Core
*/
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { RouterModule } from '@angular/router';
/**
* Third Party libs
*/
import { AppFormlyModule } from './modules/formly.module';
import { MaterialModule } from './modules/material.module';
/**
* Custom Components and Services
*/
import { DataTableComponent } from './components/data-table/data-table.component';
import { FormMasterComponent } from './components/form-master/form-master.component';
import { SiteNavComponent } from './components/site-navigation/site-navigation.component';
import { UiBlockerComponent } from './components/ui-blocker/ui-blocker.component';
import { ViewMasterComponent } from './components/view-master/view-master.component';
@NgModule({
declarations: [
UiBlockerComponent,
ViewMasterComponent,
FormMasterComponent,
SiteNavComponent,
DataTableComponent,
],
exports: [
CommonModule,
RouterModule,
MaterialModule,
AppFormlyModule,
UiBlockerComponent,
ViewMasterComponent,
FormMasterComponent,
SiteNavComponent,
DataTableComponent,
],
imports: [
CommonModule,
RouterModule,
MaterialModule,
AppFormlyModule,
FlexLayoutModule,
AppFormlyModule,
],
providers: [
DataTableComponent,
],
})
export class CoreUIModule { }
material.module.ts
import { ModuleWithProviders, NgModule} from "@angular/core";
import { MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
import { MatIconRegistry } from '@angular/material/icon';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
.
.
. (Text has been shortened for brevity)
.
.
@NgModule({
imports: [
MatAutocompleteModule,
MatBadgeModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
MatNativeDateModule
],
exports: [
MatAutocompleteModule,
MatBadgeModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
.
.
. (Text has been shortened for brevity)
.
.
])
export class MaterialModule {
constructor(public matIconRegistry: MatIconRegistry) {
// matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
static forRoot(): ModuleWithProviders<MaterialModule> {
return {
ngModule: MaterialModule,
providers: [MatIconRegistry]
};
}
}
formly.module.ts
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
.
.
. (Text has been shortened for brevity)
.
.
export class AppFormlyModule {}
Then, within the app, I import the core module:
import { CoreUIModule } from 'core-ui';
However, when compiling the app, I encounter errors indicating issues with Dependency Injection (DI) that are proving challenging to resolve.
NG8002: Can't bind to 'pageSizeOptions' since it isn't a known property of 'mat-paginator'. 1. If 'mat-paginator' is an Angular component and it has 'pageSizeOptions' input, then verify that it is part of this module. 2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
Note: For testing purposes, I am utilizing a local distribution file for the test application: "core-ui": "file:../core.ui/dist/core-ui/core-ui-0.0.2.tgz"