Не может найти модуль "@angular/material"

Ответ 1

Изменить на,

import {MaterialModule} from '@angular/material';

DEMO

Ответ 2

Выполните следующие действия, чтобы начать использовать угловой материал.

Шаг 1: Установите угловой материал

npm install --save @angular/material

Шаг 2: Анимация

Некоторые компоненты Material зависят от модуля Angular animations, чтобы иметь возможность выполнять более сложные переходы. Если вы хотите, чтобы эти анимации работали в вашем приложении, вы должны установить модуль @angular/animations и включить модуль BrowserAnimationsModule в свое приложение.

npm install --save @angular/animations

затем

import {BrowserAnimationsModule} from '@angular/platform browser/animations';

@NgModule({
...
  imports: [BrowserAnimationsModule],
...
})
export class PizzaPartyAppModule { }

Шаг 3: Импортировать модули компонентов

Импортируйте модуль NgModule для каждого компонента, который вы хотите использовать:

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
...
imports: [MdButtonModule, MdCheckboxModule],
...
 })
 export class PizzaPartyAppModule { }

Обязательно импортируйте модули Angular Material после Angular BrowserModule, так как порядок импорта имеет значение для NgModules

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MdCardModule} from '@angular/material';
@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        HomeComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        MdCardModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Шаг 4. Включите тему

Включение темы необходимо для применения всех основных стилей и стилей темы к вашему приложению.

Чтобы начать работу с предварительно созданной темой, включите в файл index.html следующее:

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Ответ 3

То, что решило эту проблему для меня.

Я использовал:

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

но ВНУТРИ ПАРАМЕТРЫ ПРИЛОЖЕНИЙ.

Источник: https://medium.com/@ismapro/first-steps-with-angular-cli-and-angular-material-5a90406e9a4

Ответ 4

Я следовал каждому из предложений здесь (я использую Angular 7), но ничего не получалось. Мое приложение отказалось признать, что @angular/material существует, поэтому оно показало ошибку в этой строке:

import { MatCheckboxModule } from '@angular/material';

Несмотря на то, что я использовал параметр --save для добавления Angular Material в свой проект:

npm install --save @angular/material @angular/cdk

... он отказался добавить что-либо в мой файл " package.json ".

Я даже пытался удалить файл package-lock.json, так как некоторые статьи предполагают, что это вызывает проблемы, но это не имело никакого эффекта.

Чтобы решить эту проблему, мне пришлось вручную добавить эти две строки в мой файл " package.json ".

{
    "devDependencies": {
        ...
        "@angular/material": "~7.2.2",
        "@angular/cdk": "~7.2.2",
        ...

Я не могу сказать, является ли это проблемой, связанной с использованием Angular 7, или это было в течение многих лет....

Ответ 5

Пожалуйста, проверьте Angular Начало работы :)

1. Установите угловой материал и угловой CDK
2. Анимации - если вам нужно
3. Импортировать модули компонентов

и наслаждайтесь {{Angular}}