Angular Material отображает только часть формы

Question

Я сделал форму, используя Angular Material, но она рендерится только частично, и после того, как я нажму на поле, появятся остальные входные данные.

Я удалил и установил Node и Angular ... Яиспользуя последнюю версию (до сегодняшнего дня).Не решено.

Я следовал этим инструкциям: https://alligator.io/angular/angular-material-2/

Код app.component:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<router-outlet></router-outlet>

<div class="form-group">
  <mat-form-field>
    <mat-label>Nome</mat-label>
    <input type="text" ngModel name="Nome" matInput required>
  </mat-form-field>
</div>

<div class="form-group">
  <mat-form-field>
    <mat-label>E-mail</mat-label>
    <input type="email" ngModel name="Email" matInput required>
  </mat-form-field>
</div>

<div class="form-group">
  <mat-form-field>
    <mat-label>Senha</mat-label>
    <input type="password" ngModel name="Senha" matInput required>
  </mat-form-field>
</div>

<div class="form-group">
  <mat-form-field>
    <mat-label>xxx</mat-label>
    <input type="text" ngModel name="xxxxxxx" matInput required>
  </mat-form-field>
</div>

<div class="form-group">
  <mat-form-field>
    <mat-label>yyy</mat-label>
    <input type="text" ngModel name="yyyyyyy" matInput required>
  </mat-form-field>
</div>

Когда я открываю localhost: 4200 появляются только 2 поля, но я ожидал увидеть все поля.После того, как я щелкну или введу в первом поле, остальные поля показывают ...

Я проверяю с помощью Chrome, и я сею, что элементы DOM (последние) были созданы только после того, как я щелкну первое поле,(Я видел вспышку в инспекторе).

Сразу после ng serve

После нажатия на первое поле:

Answer 1

мои друзья.

Похоже, что такое поведение вызвано Angular 7.

Почему?Я запускал код в ядре версии Angular 6.x, и он работал!

Я пока не нашел, как управлять этим поведением, но я найду решение - или вы, конечно же.

Спасибо.

Answer 2

код, кажется, работает, когда я запускаю его на стеке.

https://stackblitz.com/edit/angular-xs8zfq

попробуйте один раз

в pollyfills.ts

import 'hammerjs';

в styles.css

@import '@angular/material/prebuilt-themes/indigo-pink.css';