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

Question

我正在为Angular使用Clarity Design，我想知道将外部模块注入具有多个模块(subsodules(的应用程序的最佳方法是什么。

我尝试在整个应用中使用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.

Answer 1

我将创建一个新的模块文件：例如clarity.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 { }

Answer 2

sustomualmoduleexports ：组件，管道，指令等

• 子模块(又称模块W.R.T路由中的模块(不会从其类似父的模块中继承模块( sufermoduleexports (。
• 在Angular中，每个模块(甚至子模块(都是一个封闭的实体。
• 因此，您必须每次导入模块所需的所有模块。

角providers是例外。如果在应用模块中提供服务，则无处可用。因此，您会在 AppModule Imports( imports Service以及通常的moduleexports (和 Module.forChild()中看到诸如 Module.forRoot()的模式( suferalmoduleexports (((

要回答您的问题，我们创建了一个SharedModule，该CC_6导出了所有共同模块所需的模块(FormsModule，ClarityModule等(，并在每个模块中导入SharedModule。