Добавление материала и формы в библиотеку angular - PullRequest
Новая
       5

Добавление материала и формы в библиотеку angular

0 голосов
/ 04 мая 2020

Я пытаюсь создать библиотеку angular 9, которая использует материалы и модули, но не может понять, что не так в моей конфигурации.

в библиотеке

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';
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]
        };
    }
}

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';

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 {}

затем в приложении я импортирую основной модуль 

import { CoreUIModule } from 'core-ui';

но я получаю эти ошибки при компиляции приложения, предлагая что-то напортачило с DI, что я просто не могу понять.

NG8002: не могу привязать к pageSizeOptions, так как это не известное свойство «mat-paginator». 1. Если 'mat-paginator' является компонентом Angular и имеет вход 'pageSizeOptions', то убедитесь, что он является частью этого модуля. 2. Если 'mat-paginator' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение. 3. Чтобы разрешить любое свойство, добавьте 'NO_ERRORS_SCHEMA' к '@ NgModule.schemas' этого компонента.

nb Я использую локальный файл dist для тестового приложения "core-ui": "file: ../core.ui/dist/core-ui/core-ui-0.0.2.tgz"

1 Ответ

0 голосов
/ 04 мая 2020

Попробуйте включить MatPaginatorModule в ваш formly.module.ts: 

...
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    MaterialModule,
    MatInputModule,
    ReactiveFormsModule,
    MatAutocompleteModule,
    MatPaginatorModule,
...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...