Угловой 5 - Угловой материал не работает в компоненте - PullRequest
Новая
       11

Угловой 5 - Угловой материал не работает в компоненте

0 голосов
/ 27 апреля 2018

Я использую угловой материал в своем угловом приложении. Когда я импортирую в свой app.module.ts - у меня нет проблем, но когда я использую на своей странице page.component.html не работает, отображается следующая ошибка: 

'Uncaught Error: Template parse errors:
'mat-toolbar-row' is not a known element:
'1. If 'mat-toolbar-row' is an Angular component, then verify that it is part of this module.
'2. If 'mat-toolbar-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("r="let paragraph of paragraphs">{{paragraph}}</p>
    <mat-toolbar color="primary">
        [ERROR ->]<mat-toolbar-row>
          <span>MyMaterial</span>
      "): ng:///SharedComponentsModule/FollowUpComponent.html@35:12
'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <h6>Answer:</h6>
    <p *ngFor="let paragraph of paragraphs">{{paragraph}}</p>
    [ERROR ->]<mat-toolbar color="primary">
        <mat-toolbar-row>
          <span>MyMaterial</span>
"): ng:///SharedComponentsModule/FollowUpComponent.html@34:8
at syntaxError (compiler.js:485)
at TemplateParser.parse (compiler.js:24668)
at JitCompiler._parseTemplate (compiler.js:34621)
at JitCompiler._compileTemplate (compiler.js:34596)
at eval (compiler.js:34497)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:34497)
at eval (compiler.js:34367)
at Object.then (compiler.js:474)
at JitCompiler._compileModuleAndComponents (compiler.js:34366)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; 
import { MatButtonModule, MatToolbarModule } from '@angular/material';

@NgModule({
   imports: [MatButtonModule, MatToolbarModule],
   exports: [MatButtonModule, MatToolbarModule]
})
export class MaterialModule { }

Я импортировал MaterialModule и включил в imports в app.module.ts.

Вот HTML-код моего компонента: 

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>MyMaterial</span>
    <span class="example-spacer"></span>
    <button mat-button>About</button>
    <button mat-button>Services</button>
    <button mat-button>Contact</button>
  </mat-toolbar-row>
</mat-toolbar>

1 Ответ

0 голосов
/ 15 июня 2018

Была такая же проблема. Я использовал подход кувалды, чтобы решить это. Мне это тоже не нравится, но это может сработать и у вас. 

npm install --save @angular/material @angular/cdk
npm install --save angular/material2-builds angular/cdk-builds
...