Директива matInput не работает в лениво загруженном модуле

#angular

Вопрос:

Я создал модуль для отложенной загрузки, который работает по существу, проблема в том, что по какой-то причине такие вещи, как matInput , не работают. Под этим я подразумеваю, что input не получает своего причудливого вида.

MatInputModule импортируется в модуль соответствующим образом:

 const routes = [
  {path: '', component: AddPlaceComponent}
];


const MaterialModules = [
  MatFormFieldModule,
  MatInputModule,
];

@NgModule({
  declarations: [    
    // Organisms
    PlaceAutocompleteComponent,    
    // Templates
    AddPlaceComponent,
  ],
  imports: [
    CommonModule,
    FormsModule, ReactiveFormsModule,
    RouterModule.forChild(routes),
    FlexLayoutModule,
    MaterialModules,
  ]
})
export class AddPlaceModule { }

PlaceAutocompleteComponent , где input требуется, настолько проста, насколько это возможно:

 <div>
  <input matInput placeholder="test" autocomplete="off">
</div>

Тем не менее, элемент управления выглядит следующим образом:

Я просто этого не вижу. Все остальные маршруты работают. Отложенная загрузка также работает нормально, и в консоли нет предупреждений или ошибок.

Чего мне не хватает?

Я предполагаю, что это как-то связано с отложенной загрузкой и / или маршрутизацией?

1. попробуйте добавить фигурные скобки в [matInput]="123" и проверьте консоль после этого. angular должен рассказать вам кое-что полезное

2. @Andrey Все, что я получаю, это » Не могу привязаться к ‘matInput’, поскольку это неизвестное свойство ‘input’. «. Хотя эта ошибка имеет смысл.

Ответ №1:

matInputs следует использовать внутри <mat-form-field><input matInput></mat-form-field>

1. Это ничего не меняет. На самом деле, именно так я импортирую все свои модули.

2. Я не знаю, сколько раз это случалось со мной к настоящему времени. Я действительно должен прекратить работать по 14 часов каждый день.