将第三方模块用于具有多个模块的 Angular 应用程序的正确方法答案

【问题标题】：the right way to use third-party module into angular app that have multiple modules将第三方模块用于具有多个模块的 Angular 应用程序的正确方法
【发布时间】：2019-11-16 06:30:34
【问题描述】：

我正在为 Angular 使用清晰度设计，我想知道将外部模块注入我的具有多个模块（子模块）的应用程序的最佳方法是什么。

我尝试在 app.module.ts 中使用它以在整个应用程序中使用，但它不起作用，

app.module.ts

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


// third-party libraries
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ClarityModule } from '@clr/angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    ClarityModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LandingComponent } from './pages/landing/landing.component';
import { LoginComponent } from './pages/login/login.component';
import { HomeRoutingModule } from './home.routing';

import { ClarityModule } from '@clr/angular';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [LandingComponent, LoginComponent],
  imports: [CommonModule, HomeRoutingModule, FormsModule, ClarityModule],
  exports: [LandingComponent, LoginComponent]
})
export class HomeModule {}

以 x.module.ts 为例

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { aComponent} from 'acomponent';
import { bComponent} from 'bcomponent';

import { ClarityModule } from '@clr/angular';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [aComponent, bComponent],
  imports: [CommonModule, FormsModule, ClarityModule],
  exports: []
})
export class x.module.ts {}

I thought that when I inject clarity module in-app module I could use it in my whole app, but I had to inject it clarity module in every module I use.
so I was wondering if this the right and the only way to use the module.

【问题讨论】：

在exports 数组中添加ClarityModule 以在整个应用程序中使用它。

标签： javascript angular typescript module components

【解决方案1】：

我会创建一个新的模块文件：例如清晰度.module.ts。并在那里导入所有清晰度模块。还要确保从该文件中导出这些模块。那么您只需将该模块文件导入到您的主模块文件中。

这是角度/材质的示例：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatToolbarModule,
  MatButtonModule,
  MatSidenavModule,
  MatIconModule,
  MatListModule,
  MatCardModule,
  MatProgressSpinnerModule,
  MatFormFieldModule,
  MatInputModule,
  MatCheckboxModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatDialogModule,
  MatMenuModule,
  MatGridListModule,
  MatSlideToggleModule,
} from '@angular/material';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatDialogModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatGridListModule,
    MatSlideToggleModule,
  ],
  exports: [
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatDialogModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatGridListModule,
    MatSlideToggleModule,
  ],

})
export class AppMaterialModule { }

然后在你的主模块中：

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

import { AppMaterialModule } from './app-material.module';




@NgModule({
  declarations: [

  ],
  imports: [
    AppMaterialModule,
  ],

  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：

【解决方案2】：

UsualModuleExports：组件、管道、指令等

子模块（又名模块内的模块 w.r.t 路由）不从它的类父模块继承模块（UsualModuleExports）。
在 Angular 中，每个模块（甚至是子模块）都是一个封闭的实体。
因此，您必须每次都导入模块所需的所有模块。

Angular providers 是例外。如果在 App Module 中提供了一项服务，它将在任何地方都可用。因此，您会在 AppModule 导入中看到 Module.forRoot()（与 UsualModuleExports 一起导入服务）和 Module.forChild() 在 FeatureModule 导入中看到的模式（UsualModuleExports）

为了回答您的问题，我们创建了一个SharedModule，它导出所有模块（FormsModule、ClarityModule 等）所需的模块，并在每个模块中导入SharedModule。

【讨论】：