Angular import module error

Question

I have two module, ChatModule and LibraryModule and i want to import the ChatComponent inside of the LibraryComponent but im get this error

Error: Template parse errors:
'mat-tab' is not a known element:
1. If 'mat-tab' is an Angular component, then verify that it is part of this module.

note: the mat-tab is from angular material 2.

ChatModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChatComponent } from './chat.component';
import { RoomsComponent } from './rooms/rooms.component';
import { ChatviewComponent } from './chatview/chatview.component';

@NgModule({
  declarations: [
    ChatComponent,
    RoomsComponent,
    ChatviewComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ChatComponent
  ]
})
export class ChatModule { }

LibraryModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../../../core/modules/shared.module';
import { LibraryComponent } from './library.component';
import { ChatModule } from '../chat/chat.module';

const routes = [
  {
    path: 'library',
    component: LibraryComponent
  }
];

@NgModule({
  declarations: [
    LibraryComponent,
  ],
  imports: [
    SharedModule,
    ChatModule,
    RouterModule.forChild(routes)
  ],
  exports: [
    LibraryComponent
  ]
})
export class LibraryModule { }

ChatComponent.html

<mat-tab-group id="chat-tabs">
  <mat-tab label="Rooms">
    <fuse-rooms></fuse-rooms>
  </mat-tab>
  <mat-tab label="Contacts">
  </mat-tab>
</mat-tab-group>

All the material design modules are imported on app.module, on the libraryComponent the material component are working just ok. — Miguel Frias, Jan 17 '18 at 11:24
No, you need to import the Material module from your ChatModule if you plan on leveraging its components — Michael Kang, Jan 17 '18 at 11:26
https://github.com/angular/material2/blob/master/src/demo-app/demo-material-module.ts create module which imports and the material components like AppMaterialModule and include it in shared module or else include that specific material module in shared module — Karthigeyan Vellasamy, Jan 17 '18 at 11:27
Thanks for all the help guys, importing the ShareModule was the problem, that is module that have all the angular materials modules and components. Thanks so much your help >D — Miguel Frias, Jan 17 '18 at 12:37

score 3 · Answer 1 · answered Jan 17 '18 at 11:28

3

You Should add the material module. Like this

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

I am not sure MdtabModule is available in angular material.

I hope this below discussions could help you.

How to import Angular Material in project?

answered Jan 17 '18 at 11:28

Ramesh Rajendran

37,412
45
153
234

score 3 · Answer 2 · answered Jan 17 '18 at 11:31

Apparently, you have a SharedModule which exports your used MatTabsModule, you should always make sure you import the right modules for your templates.

In short:

@NgModule({
  declarations: [
    ChatComponent,
    RoomsComponent,
    ChatviewComponent
  ],
  imports: [
    SharedModule        
  ],
  exports: [
    ChatComponent
  ]
})
export class ChatModule {}

This is under the impression that you have a SharedModule at least like this:

@NgModule({
  exports: [
    MatTabsModule,
    CommonModule
  ]
})
export class SharedModule {}

mxr7350 · Accepted Answer · 2018-01-17T11:46:10.197

You can create custom MaterialModule where you can import modules used in your project.

MaterialModule

// Core
import {
  MatTabsModule, MatCheckboxModule, MatInputModule, MatSelectModule,
  MatButtonModule, MatDialogModule, MatTooltipModule
} from '@angular/material';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [ MatTabsModule, MatCheckboxModule, MatInputModule, MatSelectModule, MatButtonModule, MatDialogModule, MatTooltipModule ],
  exports: [ MatTabsModule, MatCheckboxModule, MatInputModule, MatSelectModule, MatButtonModule, MatDialogModule, MatTooltipModule ],
})
export class MaterialModule { }

And you can import it in your SharedModule like this.

SharedModule

import { MaterialModule } from './your/path/MaterialModule';

@NgModule({
  imports: [
    ...
    MaterialModule,
    ...
  ],
  ...
)}
export class SharedModule {
...
}

Angular import module error

3 Answers3