правильный способ использовать сторонний модуль в угловое приложение, которое имеет несколько модулей

Question

Я использую дизайн ясности для 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.

Answer 1

UsualModuleExports : компоненты, трубы, директивы и т. Д.

• Субмодули (модуль a.k.a внутри модуля с маршрутизацией.r) не наследует модули ( UsualModuleExports ) от своего родительского модуля.
• В Angular каждый модуль (даже субмодуль) является замкнутым объектом .
• Итак, вы должны импортировать все модули, требуемые модулем каждый раз.

Угловой providers является исключением. Если услуга предоставляется в модуле приложения, она будет доступна везде. Итак, вы видите шаблоны, такие как Module.forRoot() в AppModule импорте ( служба импорта вместе с UsualModuleExports ) и Module.forChild() в FeatureModule импорте ( UsualModuleExports )

Чтобы ответить на ваш вопрос, мы создаем SharedModule, который экспортирует модули, необходимые для всех общих модулей (FormsModule, ClarityModule и т. Д.), И импортирует SharedModule в каждый модуль.

Answer 2

Я бы создал новый файл модуля: например, 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 { }