Угловой материал, похоже, не работает в StackBlitz

Question

При попытке воспроизвести еще одну проблему, я пытался использовать StackBlitz для репликации.

Однако Angular Material, похоже, не работает на StackBlitz.... какие-либо советы или идеи о том, что я могу делать неправильно?

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

Обновить

Эта ссылка сейчас в рабочем состоянии. Проблема была в том, что я не включил импорт стилей.

Answer 1

styles.css

нужна тема, например

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Смотрите - https://material.angular.io/guide/theming

Обновить

В случае, если кто-то еще попадет сюда с другими проблемами, я добавлю общие проблемы, заставляющие Stackblitz работать с Angular Materials:

Обратите внимание, что каждый компонент имеет актуальный стекблитц - ссылка для каждого находится на вкладке " Примеры " в крайнем правом углу для каждого компонента, например, https://material.angular.io/components/slider/examples

контрольный список

1. Проверьте тему на styles.css
2. Проверить, если hammer.js требуется (см. любое примечание курсивом на вкладке API), если это так, добавьте import 'hammerjs'; в polyfills.ts, Обратите внимание, что в вашем приложении вы будете делать это в точке входа вашего приложения (например, src/main.ts). См. Руководство по началу работы на веб-сайте https://material.angular.io/guides
3. Не забудьте импортировать BrowserAnimationsModule
4. Убедитесь, что импортированы соответствующие модули для конкретного компонента из материала, например import {MatAutocompleteModule} from '@angular/material/autocomplete';, Примеры на сайте импортируют все что угодно. Моя стратегия, когда я хочу импортировать только то, что требуется, состояла в том, чтобы импортировать модуль, показанный на вкладке API, и затем отправить сообщение об ошибке Google, например mat-form-field must contain a MatFormFieldControl и найти ответ stackru, чтобы знать MatInputModule пропал, отсутствует.

Answer 2

Вам необходимо импортировать тему в ваше приложение. Добавить эту строку в styles.css:

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

https://material.angular.io/guide/getting-started

Андрей Аллен был быстрее:)