How to create a shared module

Question

Brand new to Ionic/Angular development, I have the following structure

- src
-- /app
---- app.component.ts
---- app.module.ts
---- main.ts
---- ...
-- /pages
---- /event-home
------ /event-home.module.ts
------ /event-home.ts

event-home.module.ts:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { EventHomePage } from './event-home';

@NgModule({
  declarations: [
  EventHomePage,
],
imports: [
    IonicPageModule.forChild(EventHomePage),
],
entryComponents: [
  EventHomePage
]
})
export class EventHomePageModule {}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { EventEntryPage, EventHomePage, EventDiscussionPage, 
EventHandoutsPage, EventInfoPage } from "../pages/pages";

@NgModule({
  declarations: [
    MyApp,
    EventEntryPage,
    EventHomePage,
    EventDiscussionPage,
    EventHandoutsPage,
    EventInfoPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    EventEntryPage,
    EventHomePage,
    EventDiscussionPage,
    EventHandoutsPage,
    EventInfoPage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

I am trying to do a deeplink to http://localhost:8100/#/event-home, which, within event-home.ts I use IonicPage().

When I visit the url, I get Error: Type EventHomePage is part of the declarations of 2 modules: AppModule and EventHomePageModule! Please consider moving EventHomePage to a higher module that imports AppModule and EventHomePageModule.

I think I need to be creating a shared module, but I'm still trying to wrap my head around how to do this. I started with something like:

import {NgModule} from "@angular/core";
import {EventHomePage} from "../pages/event-home/event-home";

@NgModule({
    declarations: [ EventHomePage ],
    exports: [ EventHomePage ]
})
export class SharedModule {}

But I'm stuck at, "what do I do now?". If it isn't clear yet, I am kind of poking around blind here so if I'm chasing the wrong solution, please point that out.

Doing that results in `Component EventHomePage is not part of any NgModule or the module has not been imported into your module.` — Chris Rockwell, Nov 21 '17 at 03:55
The file still exists, yes. If I delete it Ionic complains about using IonicPage() in event-home.ts without having event-home.module.ts — Chris Rockwell, Nov 21 '17 at 04:03
Ensure that, just import `EventHomePage` in ONLY `event-home.module.ts` and in `event-home.module.ts` do NOT use `entryComponents`.The easier way is using the [Ionic CLI](https://ionicframework.com/docs/cli/generate/): `ionic g page event-home`. You will see how it is imported in the module. — Duannx, Nov 21 '17 at 04:07

score 2 · Answer 1 · answered Nov 20 '17 at 20:30

Components can be declared only in one module, and nor are their access inherited in any way, meaning declaring it in the main app module will not give you access to it in any other module. If you have a component that is used by other modules the best and only way it to create shared module as you already noticed:

import {NgModule} from "@angular/core";
import {EventHomePage} from "../pages/event-home/event-home";

@NgModule({
    declarations: [ EventHomePage ],
    exports: [ EventHomePage ]
})
export class SharedModule {}

Than in your core module just simply import your SharedModule :

...
import { SharedModule } from './shared/shared.module';

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  declarations: [
    ...
    ...
  ]
  ...
})
export class AppModule {}

Helpful links:

Am I right in thinking, that for any component that is being exported in the SharedModule, if it requires modules itself, you must place those in the 'imports' section of the SharedModule? — Evan Sevy, Apr 07 '20 at 03:28

How to create a shared module

1 Answers1

Linked