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
– Kisinga, Commented Jan 23, 2019 at 20:11

Sameer Ahmed S · Accepted Answer · 2019-06-08 18:38:07Z

1

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

answered Jun 8, 2019 at 18:38

Sameer Ahmed S

1,7093 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joya · Accepted Answer · 2022-09-23 12:50:17Z

0

Core Module and core component are two different thing which means you have to declare core component in app.module file

    import {NgModule} from '@angular/core';
import {CoreComponent} from './core.component';
import {CommonModule} from '@angular/common';

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

edited Sep 23, 2022 at 12:50

answered Sep 23, 2022 at 12:49

Joya

1211 silver badge4 bronze badges

Collectives™ on Stack Overflow

Core module component and Shared module implementation in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related