Аннотация углового материала @NgModule?

Как я могу использовать компоненты Angular-Material в разных компонентах? Я смотрел и читал несколько руководств, но они не решили мою проблему. Я до сих пор не могу их использовать. Вот ошибка:

compiler.js:2430 Uncaught Error: Unexpected directive 'MatToolbar' imported by the module 'MaterialModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:2430)
    at compiler.js:18645
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18620)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:18555)
    at compiler.js:18642
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18620)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:26029)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)

Я сделал файл TypeScript, который импортирует мне все компоненты материалов, которые я хочу.

материал.тс :

import { MatButtonModule, MatCheckboxModule, MatToolbar, MatToolbarRow,  } from '@angular/material';
import { NgModule } from '@angular/core';
import {MatToolbarModule} from '@angular/material/toolbar';

@NgModule({
  imports: [
    MatButtonModule,
    MatCheckboxModule,
    MatToolbar,
    MatToolbarRow,
    MatToolbarModule
  ],
  exports: [
    MatButtonModule,
    MatCheckboxModule,
    MatToolbar,
    MatToolbarRow,
    MatToolbarModule
  ]
})

export class MaterialModule { }

приложение.модуль.тс :

import { MaterialModule } from './material';
import { CvServiceService } from './service/cv-service.service';
import { environment } from './../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SkillsComponent } from './skills/skills.component';
import { MenubarComponent } from './menubar/menubar.component';

@NgModule({
  declarations: [
    AppComponent,
    SkillsComponent,
    MenubarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    AngularFirestoreModule,
    AngularFireModule.initializeApp(environment.firebase, 'angularfs'),
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [CvServiceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Как я могу использовать компоненты AngularMaterial?

когда вы создали свой material.ts, вы создали его как модуль?

Guillaume 15.04.2019 16:17

Неа. Я создал его, как этот учебник

Gion Rubitschung 15.04.2019 16:19
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
915
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам нужно импортировать MatToolbarModule, а не MatToolbar.

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

Итак, когда я хочу импортировать компонент, я должен импортировать его модуль?

Gion Rubitschung 15.04.2019 16:25

Да, как указано в документах import {MatToolbarModule} from '@angular/material/toolbar';material.angular.io/components/toolbar/api

umutesen 15.04.2019 16:36

Вы получаете сообщение об ошибке, потому что вы импортируете немодуль:

imports: [
    MatButtonModule,
    MatCheckboxModule,
    // MatToolbar,       // remove these
    // MatToolbarRow,    // two lines
    MatToolbarModule
  ],

Вы можете импортировать только классы, украшенные @NgModule, обычно все они имеют суффикс «Module».

Другие вопросы по теме