typescript 如何通过 Angular 4 中的共享模块正确导入 Angular Material 模块？

How to correctly import the Angular Material module through a shared module in Angular 4?

提问by Samuele

I'm building an application using Angular paired with Angular Material, and I'm having some issues with my modules structure.

我正在使用 Angular 和 Angular Material 构建应用程序，但我的模块结构存在一些问题。

As the guidelines suggest, importing the MaterialModule is deprecated and should no longer be done, which is why I've made a separate MaterialModule where I only import the Material modules I need to use; this module is then imported in a SharedModule, which is eventually imported everywhere it's needed, including the main AppModule.

正如指导方针所建议的，导入 MaterialModule 已被弃用，不应再进行，这就是为什么我制作了一个单独的 MaterialModule，我只导入了我需要使用的 Material 模块；然后这个模块被导入到一个 SharedModule 中，它最终被导入到任何需要它的地方，包括主 AppModule。

One of the Material components I'm using is the MdTooltip, and it all works fine except for when I test my app on a tablet: what happens is that the tooltips don't react to long taps like they're supposed to, and they won't open. The only way I've managed to make it work is by importing the full MaterialModule (from @angular/material) in my AppModule, which is horrendously wrong and inelegant. Any other approach didn't quite seem to cut it, as they would all bring their own problems while not solving the ordeal.

我正在使用的 Material 组件之一是 MdTooltip，它一切正常，除了我在平板电脑上测试我的应用程序时：发生的情况是工具提示不会像他们应该的那样对长按做出反应，并且他们不会打开。我设法让它工作的唯一方法是在我的 AppModule 中导入完整的 MaterialModule（来自@angular/material），这是非常错误和不雅的。任何其他方法似乎都没有完全解决它，因为它们都会带来自己的问题，而不能解决磨难。

These are my modules (stripped of redundant import statements):

这些是我的模块（去除了多余的导入语句）：

MaterialModule:

材料模块：

import { NgModule } from '@angular/core';
import {...} from '@angular/material';

@NgModule({
  imports: [
    MdGridListModule,
    MdButtonModule,
    MdTabsModule,
    MdToolbarModule,
    MdCardModule,
    MdInputModule,
    MdSelectModule,
    MdAutocompleteModule,
    MdIconModule,
    MdTooltipModule
  ],
  exports: [
    MdGridListModule,
    MdButtonModule,
    MdTabsModule,
    MdToolbarModule,
    MdCardModule,
    MdInputModule,
    MdSelectModule,
    MdAutocompleteModule,
    MdIconModule,
    MdTooltipModule
  ],
  providers: [
    MdIconRegistry
  ]
})

export class MaterialModule {}

SharedModule:

共享模块：

import { MaterialModule } from '../material/app-material.module';
@NgModule({
  imports:      [
    CommonModule,
    MaterialModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    NavbarComponent,
    SearchFiltersComponent,
    RightCurrencyPipe
  ],
  exports:      [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
    FlexLayoutModule,
    NavbarComponent,
    RightCurrencyPipe,
    SearchFiltersComponent
  ],
  providers: [
    SpinnerService,
    ProductsService,
    StatePersistenceService
  ]
})

export class SharedModule {}

AppModule:

应用模块：

import { MaterialModule } from "@angular/material";
@NgModule({
  declarations: [
    AppComponent,
    ProductPageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    SharedModule,
    CoreModule,
    LoginModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Am I doing something wrong? How would you go about dividing your app into submodules?

难道我做错了什么？您将如何将您的应用程序划分为子模块？

Thanks in advance

提前致谢

回答by alaboudi

Your approach is great. The structure that you have presented is an alternative that was presented in material.angular.io. I am unsure to why your tooltip does not work. But I would like to advise you to only use your custom MaterialModule only once on the root module. There is no need to import it in the SharedModule again.

你的方法很棒。您提供的结构是 material.angular.io 中提供的替代结构。我不确定为什么您的工具提示不起作用。但我想建议您在根模块上只使用一次自定义 MaterialModule。无需再次将其导入 SharedModule 中。

回答by LacOniC

Your first mistake is services in SharedModule. SharedModule should not have Providers array. CoreModule is used for services.

您的第一个错误是 SharedModule 中的服务。SharedModule 不应有 Providers 数组。CoreModule 用于服务。

You don't need to import all stuff in shared module. SharedModule is for exports usually. Also MaterialModule does not need imports because it does not use them. Its purpose is export.

您不需要导入共享模块中的所有内容。SharedModule 通常用于导出。MaterialModule 也不需要导入，因为它不使用它们。它的目的是出口。

If NavBarComponent is used app wide so it should be in CoreModule. Not in SharedModule.

如果 NavBarComponent 在应用程序范围内使用，那么它应该在 CoreModule 中。不在 SharedModule 中。

If you do not have to, don't import SharedModule into AppModule. SharedModule is for FeaturedModules.

如果不需要，请不要将 SharedModule 导入 AppModule。SharedModule 用于 FeaturedModule。

Read Offical Docs: https://angular.io/guide/ngmodule-faq#what-kinds-of-modules-should-i-have-and-how-should-i-use-them

阅读官方文档：https: //angular.io/guide/ngmodule-faq#what-kinds-of-modules-should-i-have-and-how-should-i-use-them

回答by Raven

Depending on your compiling and deployment strategy you'll want to use tree shaking (for dead-code elimination or live-code import). This is the main motivation for MaterialModulebeing deprecated. The official suggestion is to only import the components you needin the modules that need it. Your solution of creating a single MaterialModulewith all the imports is undoing that aspect but might work depending on your project structure (if you're only using a single module for example).

根据您的编译和部署策略，您需要使用摇树（用于消除死代码或导入实时代码）。这是MaterialModule被弃用的主要动机。官方建议只在需要的模块中导入你需要的组件。您MaterialModule使用所有导入创建单个的解决方案正在撤消该方面，但可能会起作用，具体取决于您的项目结构（例如，如果您仅使用单个模块）。

Try removing MaterialModulefrom your SharedModuleexports. That way you only have a single point of entry for the module in your app root.

尝试MaterialModule从您的SharedModule导出中删除。这样，您的应用程序根目录中的模块只有一个入口点。