Группы вкладок Angular Materials не импортируются

Я пытаюсь создать группу мат-вкладок с угловыми материалами.

Ошибки:

Compiled with problems:
ERROR

../../app.module.ts:28:5 - error NG2011: The component 'MatTab' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule.

28     MatTab,
       ~~~~~~

ERROR

../../app.module.ts:29:5 - error NG2011: The component 'MatTabGroup' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule.

29     MatTabGroup
       ~~~~~~~~~~~

Мой HTML-код на myTab-group.component.html

<mat-tab-group>
    <mat-tab label = "First"> Content 1 </mat-tab>
    <mat-tab label = "Second"> Content 2 </mat-tab>
    <mat-tab label = "Third"> Content 3 </mat-tab>
</mat-tab-group>

мой код app.component.html

<app-myTab-group></app-myTab-group>

Вот странная часть, у меня есть MatTab и MatTabGroups, импортированные в app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatCardModule } from '@angular/material/card';
import {  MatButtonModule } from '@angular/material/button'
import { MatTab, MatTabGroup} from '@angular/material/tabs'

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MainCardComponent } from './panel/main-card/main-card/main-card.component';
import { PanelHeaderComponent } from './panel/panel-header/panel-header.component';
import { PanelTabsComponent } from './panel/panel-tabs/panel-tabs/panel-tabs.component';


@NgModule({
  declarations: [
    AppComponent,
    MainCardComponent,
    PanelHeaderComponent,
    PanelTabsComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    MatTab,
    MatTabGroup
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

И когда я удаляю импорт, он не компилируется из-за проблем в html-файле.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
99
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

вам нужно будет импортировать MatTabsModule вместо MatTab, MatTabGroup что-то вроде

import {MatTabsModule} from '@angular/material/tabs';

затем в импорте

 imports: [
...otherimports,
   MatTabsModule
  ],

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

Kyle Styx 15.09.2022 09:35

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