Угловой материал 5 элементов не отображается должным образом

Question

У меня возникли проблемы с рендерингом Angular Material моего приложения.На одной странице приложения он отображается нормально, а в другом подмодуле - нет.(Итак, да, я импортировал материал css) Я считаю, что это как-то связано с порядком импорта моего импорта, но я не уверен.Я не могу воспроизвести его на каких-либо поршнях: /

Два элемента, которые я использую, и их проблемы:

1. Кнопка: выглядит хорошо, но color = "primary" не применяет цвет
2. Поле ввода: выглядит хорошо, но заполнитель не плавает
3. Я попытался добавить MatDatePicker в тот же компонент, и он не работал ни.
4. Все остальные элементы вприложение отлично работает

HTML:

  <form [formGroup]="form" (ngSubmit)="onRegistration()">
    <mat-form-field>
      <input matInput 
             placeholder="Username">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Password">
    </mat-form-field>
    <button mat-raised-button color="primary">Submit</button>
  </form>

Это мой общий модуль:

  imports: [
    CommonModule,
    BrowserAnimationsModule,
    MaterialComponentsModule,
    AppRoutingModule
  ],
  declarations: [NavbarComponent, FooterComponent],
  exports: [
    CommonModule,
    BrowserAnimationsModule,
    MaterialComponentsModule,
    NavbarComponent,
    FooterComponent,
    FormsModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpModule,
    HttpClientModule,
    JwtModule
  ],

Это мой модуль компонентов материала:

  imports: [
  ],
  exports: [
    MatInputModule,
    MatFormFieldModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatDialogModule,
    MatProgressSpinnerModule,
    MatTabsModule,
    MatExpansionModule,
    MatDatepickerModule,
    MatSnackBarModule,
    MatButtonModule
  ],

Я пытался переключить порядок MatInputModule / MatFormFieldModule.В моем функциональном модуле я только импортирую SharedModule

imports[SharedModule]