Core module component and Shared module implementation in angular

Question

I want to implement core/shared module structure in my angular app (> v2).

I added core module with core component and shared module. Next I added simple component for data representation and data service for http.

The Core module has CommonModule and HttpClientModule imports, CoreComponent declarations and data service as provider.

Shared module exports component for data representation (ProductSectionComponent)

CoreComponent has the "app-product-section" marker.

Here's my code:

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 { }

core.module:


    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 { }

Now, I have the problem in 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.

The problem is solved when I add the SharedModule to the CoreModule imports but I feel that isn't an essence of Core/Shared structure.

This is because to use an element it must be imported within the module I don't think there's a way of going round that because your intention is to embed the child component which has its own module If your intention is to lazy load the child while leaving out the core component, you can achieve this via the routing module. Otherwise, I suggest you create a common component that is loaded by default when SharedModule is loaded — Kisinga

sameer sameer · Accepted Answer · 2019-06-08T18:38:07

Intent behind CoreModule is to hold all the Singleton Services that are used across the application.

As far as SharedModule is concern , it suppose to hold the UI components, service , pipe etc that can be used by more on then one feature modules.

i think you have to rethink about the structure of your project. Please refer angular.io guideline Link

Core module component and Shared module implementation in angular

1 Answers