Componente del módulo principal e implementación del módulo compartido en angular

1

Quiero implementar la estructura del módulo central / compartido en mi aplicación angular (> v2).

Agregué un módulo central con un componente central y un módulo compartido. A continuación, agregué un componente simple para la representación de datos y el servicio de datos para http.

El módulo Core tiene importaciones CommonModule y HttpClientModule, declaraciones CoreComponent y servicio de datos como proveedor.

Componente de exportación de módulo compartido para representación de datos (ProductSectionComponent)

CoreComponent tiene el marcador "app-product-section".

Aquí está mi código:

app.module:

    import { SharedModule } from './shared/shared.module';
    import { CoreModule } from './core/core.module';
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        CoreModule,
        SharedModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

módulo principal:

    import { DataService } from './../services/data.service';
    import { NgModule, Optional, SkipSelf } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { CoreComponent } from './core.component';
    import { HttpClientModule } from '@angular/common/http';

    @NgModule({
      imports: [
        CommonModule,
        HttpClientModule
      ],
      declarations: [CoreComponent],
      providers: [DataService],
      exports: [CoreComponent]
    })
    export class CoreModule {
      /* make sure CoreModule is imported only by one NgModule the AppModule */
      constructor (
        @Optional() @SkipSelf() parentModule: CoreModule
      ) {
        if (parentModule) {
          throw new Error('CoreModule is already loaded. Import only in AppModule');
        }
      }
    }

core.component:

    <app-product-section></app-product-section>

shared.module:

    import { ProductSectionComponent } from './../public/product-section/product-section.component';
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';

    @NgModule({
      declarations: [ProductSectionComponent],
      imports: [
        CommonModule
      ],
      exports: [
        ProductSectionComponent
      ]
    })
    export class SharedModule { }

Ahora, tengo el problema en core.component.html:

'app-product-section' is not a known element: 1. If 'app-product-section' is an Angular component, then verify that it is part of this module. 2. If 'app-product-section' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

El problema se resuelve cuando agrego SharedModule a las importaciones de CoreModule, pero siento que no es una esencia de la estructura Core / Shared.

1
  • 1
    Esto se debe a que para usar un elemento debe ser importado dentro del módulo, no creo que haya una forma de evitarlo porque su intención es incrustar el componente secundario que tiene su propio módulo. dejando fuera el componente principal, puede lograrlo a través del módulo de enrutamiento. De lo contrario, le sugiero que cree un componente común que se carga de forma predeterminada cuando se carga SharedModuleKisinga 23/01/19 a las 20:11
0

La intención detrás de CoreModule es mantener todos los Servicios Singleton que se utilizan en la aplicación.

En lo que respecta a SharedModule, se supone que contiene los componentes de la interfaz de usuario, el servicio, la tubería, etc.que pueden ser utilizados por más de un módulo de funciones.

Creo que tienes que repensar la estructura de tu proyecto. Por favor refiérase angular.io directriz Enlace