web-dev-qa-db-fra.com

Utiliser le composant AppModule dans un module enfant dans Angular 4

J'ai créé un petit composant (LoadingComponent) à la racine de mon application et l'a déclaré (évidemment) dans ma AppModule. Ce composant est utilisé lors du chargement de mon application et doit afficher des animations de chargement fantaisistes.

Maintenant, je veux l'utiliser dans un module enfant lorsque je sauvegarde quelque chose. Mais je reçois toujours des erreurs lorsque je veux utiliser ce composant dans un autre module.

J'ai exporté le LoadingComponent dans mon AppModule:

import { ButtonsModule } from './buttons/buttons.module';
import { FormsModule } from '@angular/forms';
import { StatusLightsDisplayComponent } from './status-lights-display/status-lights-display.component';
import { StatusLightsContainerComponent } from './status-lights-container/status-lights-container.component';
import { HttpModule } from '@angular/http';
import { ReportsService } from './services/reports.service';
import { BrowserModule } from '@angular/platform-browser';
import { forwardRef, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GeneralInformationComponent } from './general-information/general-information.component';
import { TextfieldsComponent } from './textfields/textfields.component';
import { LoadingComponent } from './loading/loading.component';

@NgModule({
  declarations: [
    AppComponent,
    GeneralInformationComponent,
    TextfieldsComponent,
    StatusLightsContainerComponent,
    StatusLightsDisplayComponent,
    LoadingComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ButtonsModule
  ],
  exports: [
    LoadingComponent
  ],
  providers: [
    ReportsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Le module que je veux utiliser LoadingComponent s'appelle ButtonsModule. J'ai donc essayé d'importer la AppModule dans ma ButtonsModule. Mais je reçois l'erreur: Unexpected value 'undefined' imported by the module 'ButtonsModule'

Voici mon module de boutons:

import { AppModule } from '../app.module';
import { LoadingComponent } from '../loading/loading.component';
import { BottomComponent } from './bottom/bottom.component';
import { CalendarComponent } from './top/calendar/calendar.component';
import { CommonModule } from '@angular/common';
import { ExportService } from '../services/export.service';
import { forwardRef, NgModule } from '@angular/core';
import { FunctionsComponent } from './functions/functions.component';
import { NavArrowsComponent } from './shared/nav-arrows/nav-arrows.component';
import { SaveButtonComponent } from './shared/save-button/save-button.component';
import { TopComponent } from './top/top.component';

@NgModule({
  imports: [
    CommonModule,
    AppModule
  ],
  exports: [
    TopComponent,
    FunctionsComponent,
    BottomComponent
  ],
  declarations: [
    TopComponent,
    BottomComponent,
    FunctionsComponent,
    NavArrowsComponent,
    SaveButtonComponent,
    CalendarComponent
  ],
  providers: [
    ExportService
  ]
})
export class ButtonsModule { }

J'imagine que certains d'entre vous reconnaissent déjà que certains échouent ici :).

Je sais que la meilleure pratique consiste à créer un module partagé, puis à l'importer dans ma AppModuleet la ButtonsModule, mais cela semble un peu exagéré, juste pour un si petit composant et ce serait également mon seul module partagé. Cela créerait aussi beaucoup de frais généraux.

Mes questions:

  • Est-ce que je fais quelque chose de mal ici? Si oui, qu'est ce que c'est?
  • Serait le chemin, en créant un module partagé, le bon?
  • Pourquoi mon approche ne fonctionne-t-elle pas? Je veux dire, qu'est-ce qui m'empêche d'approcher sous le capot de Angular et pourquoi?
angularangular-module
5
Florian Leitgeb

Les NgModules aident à organiser une application en blocs cohérents de fonctionnalité.

Chaque application Angular a une classe de module racine. Par convention, la racine La classe de module s'appelle AppModule et existe dans un fichier nommé app.module.ts.

Et si j'importais deux fois le même module?

Ce n'est pas un problème. Lorsque trois modules importent tous le module 'A', Angular évalue le module 'A' une fois, la première fois qu'il le rencontre, et ne le fait pas encore.

C’est vrai quel que soit le niveau A qui apparaît dans une hiérarchie d’importations modules. Lorsque le module "B" importe le module "A", le module "C" importe "B", et le module "D" importe [C, B, A], puis "D" déclenche l'évaluation de "C", qui déclenche l'évaluation de "B", qui évalue "A". Quand Angular arrive à 'B' et 'A' dans 'D', ils sont déjà mis en cache et Prêt à partir.

Angular n'aime pas les modules avec des références circulaires, alors ne laissez pas Le module 'A' importe le module 'B', qui importe le module 'A'.

Lien

À la fin, tout est compilé dans le module principal de l'application et importé à nouveau dans le même module rend la condition ci-dessus vraie de dépendance circulaire. Et étant le module principal, il devrait idéalement ne pas avoir d'exportations pouvant être utilisées par d'autres modules.

7
Rahul Singh

Créez un module de composants dont le seul travail consiste à rassembler les composants, à les exporter et à les importer aux deux endroits. Au début, cela semble douloureux, mais ensuite vous réalisez que cela aide d’organiser ce qui est utilisé, où et à l’échelle.

1
httpete