1

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.

1
  • 1
    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
    Jan 23, 2019 at 20:11

2 Answers 2

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.