'mat-toolbar' - не известный элемент - Angular 5 - PullRequest
Новая
       5

'mat-toolbar' - не известный элемент - Angular 5

0 голосов
/ 03 мая 2018

Я создал новый проект и пытаюсь добавить angular-material.

Я создал material.module.ts в моей папке app: 

import { NgModule } from '@angular/core';

import {
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
} from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule,
    ],
    exports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule
    ]
})
export class MaterialModule { }

и я импортировал его в один из моих компонентов: 

import { MaterialModule } from '../material.module';

Кроме того, я настроил угловой материал в index.html

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

по моему style.css 

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

Я знаю, что это работает, потому что я показал material-icon в качестве теста: 

<i class="material-icons">face</i>

но когда я пытаюсь создать нижний колонтитул, происходит сбой, и он показывает это сообщение:

Uncaught Error: Ошибки разбора шаблона: 'mat-toolbar' не является известным элементом: 1. Если 'mat-toolbar' является угловым компонентом, то убедитесь, что он является частью этого модуля. 2. Если 'mat-toolbar' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение.

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

Это потому, что вы должны импортировать модуль в модуль, который содержит объявление компонента, не в сам компонент:

app.module.ts

import { MaterialModule } from './material.module';

@NgModule({
  imports: [
    // ...
    MaterialModule
  ],
  declarations: [
    MyCoolComponent,
    // ...
  ]
})

P.S. Правильный способ использовать значок материала - использовать компонент MatIcon. Пример использования: 

<mat-icon>home</mat-icon>
0 голосов
/ 03 мая 2018

У меня отлично работает здесь: https://stackblitz.com/edit/angular-w9ckf8

Просмотрите ссылку и посмотрите, чего вам не хватает.

...