角度导入模块错误答案

【问题标题】：Angular import module error角度导入模块错误
【发布时间】：2018-01-17 11:19:53
【问题描述】：

我有两个模块，ChatModule 和 LibraryModule，我想在 LibraryComponent 中导入 ChatComponent，但我得到了这个错误

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.

注意：mat-tab 来自角材料 2。

聊天模块

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 { }

图书馆模块

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>

【问题讨论】：

你必须导入 Material 模块
所有的材料设计模块都在app.module上导入，在libraryComponent上材料组件工作正常。
在您的ChatModule 中导入SharedModule
是的。非常感谢
不，如果您打算利用其组件，则需要从 ChatModule 导入 Material 模块

标签： angular angular-cli angular-material2

【解决方案1】：

您应该添加材料模块。像这样

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

我不确定MdtabModule 是否有角材料。

我希望下面的讨论可以帮助你。

How to import Angular Material in project?

【讨论】：

【解决方案2】：

显然，您有一个 SharedModule 导出您使用的 MatTabsModule，您应该始终确保为您的模板导入正确的模块。

简而言之：

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

这是在您的印象中，您至少有一个 SharedModule 是这样的：

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

【讨论】：

【解决方案3】：

您可以创建自定义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 { }

您可以像这样将其导入您的SharedModule。

共享模块

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

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

【讨论】：