我正在尝试创建一个使用material和fomrly模块的angular 9库,但无法理解我的配置中的错误。
在库中
core-ui.module.ts
@if(isset($name))
//do something
@else
// Do something
@endif
material.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 { }
formly.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';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatRippleModule } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
@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,
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
],
providers: []
})
export class MaterialModule {
constructor(public matIconRegistry: MatIconRegistry) {
// matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
static forRoot(): ModuleWithProviders<MaterialModule> {
return {
ngModule: MaterialModule,
providers: [MatIconRegistry]
};
}
}
然后在应用程序中导入核心模块
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { FormlyMaterialModule } from '@ngx-formly/material';
import { FormlyMatDatepickerModule } from '@ngx-formly/material/datepicker';
import { FormlyMatNativeSelectModule } from '@ngx-formly/material/native-select';
import { FormlyMatSliderModule } from '@ngx-formly/material/slider';
import { FormlyMatToggleModule } from '@ngx-formly/material/toggle';
import { MaterialModule } from './material.module';
import { AutocompleteTypeComponent } from '../components/form-master/custom-components/autocomplete';
import {
validationMessages,
validationMethods
} from '../components/form-master/custom-validations/validation.constants';
@NgModule({
imports: [
CommonModule,
FormsModule,
MaterialModule,
MatInputModule,
ReactiveFormsModule,
MatAutocompleteModule,
FormlyMatDatepickerModule,
FormlyMatToggleModule,
FormlyMatSliderModule,
FormlyMaterialModule,
FormlyModule.forRoot({
types: [
{
name: 'autocomplete',
component: AutocompleteTypeComponent,
wrappers: ['form-field']
}
],
validators: [
{
name: 'integer',
validation: validationMethods.integer
},
{
name: 'decimal',
validation: validationMethods.decimal
},
{
name: 'phone-number',
validation: validationMethods.phoneNumber
},
{
name: 'email',
validation: validationMethods.email
}
],
validationMessages: [
{
name: 'required',
message: 'This field is required'
},
{
name: 'max-length',
message: validationMessages.maxLength
},
{
name: 'integer',
message: validationMessages.integer
},
{
name: 'decimal',
message: validationMessages.decimal
},
{
name: 'phone-number',
message: validationMessages.phoneNumber
},
{
name: 'email',
message: validationMessages.email
},
{
name: 'mat-datepicker-min',
message: validationMessages.minDate
},
{
name: 'mat-datepicker-max',
message: validationMessages.maxDate
}
],
}),
FormlyMatNativeSelectModule
],
exports: [
ReactiveFormsModule,
FormlyModule,
FormlyMaterialModule,
FormlyMatNativeSelectModule
],
declarations: [
AutocompleteTypeComponent
]
})
export class AppFormlyModule {}
但是在编译应用程序时出现这些错误,表明DI搞砸了一些我无法弄清楚的东西。
NG8002:无法绑定到“ pageSizeOptions”,因为它不是“ mat-paginator”的已知属性。 1.如果“ mat-paginator”是一个Angular组件,并且具有“ pageSizeOptions”输入,则请验证它是否属于此组件 模块。 2.如果“ mat-paginator”是Web组件,则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。 3.要允许任何属性,请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。
nb我正在为测试应用程序“ core-ui”使用本地dist文件:“ file:../ core.ui / dist / core-ui / core-ui-0.0.2.tgz” >
答案 0 :(得分:0)
尝试在您的MatPaginatorModule
中加入formly.module.ts
:
...
@NgModule({
imports: [
CommonModule,
FormsModule,
MaterialModule,
MatInputModule,
ReactiveFormsModule,
MatAutocompleteModule,
MatPaginatorModule,
...