Help with SharedModule (ionic 4)

Ionic Framework ionic-v3
1

Hi all,

I have a situation where I have a component that needs to be included into two modules, but this causes the error: Type PinComponent is part of the declarations of 2 modules: AppModule and PinModule! Please consider moving PinComponent to a higher module that imports AppModule and PinModule.

I can’t move the PinComponent higher as it’s already in the main AppModule so from what I understand the best way to do this is to create a SharedModule that imports this component and you then include that into the two modules that require it.

However in doing so it seems to completely break the project instead. For example my pretty basic SharedModule:

import {NgModule} from '@angular/core';

import {PinComponent} from './components/pin.component';

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

Then my main AppModule:

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

@NgModule({
    declarations: [
        ...
    ],
    entryComponents: [
        ...
    ],
    imports: [
        SharedModule,
        ...
    ],
    providers: [
        ...
    ],
    bootstrap: [AppComponent],
    exports: [
        PinComponent
    ]
})
export class AppModule {

  constructor() {
  }

}

Again pretty straight forward, and it matches all the examples I’ve found, but I suddenly the app doesn’t load at all and I get all sorts of angular errors like this:

Can't bind to 'ngIf' since it isn't a known property of 'h2'

If I remove the shared module and just include PinComponent as a decleration in AppModule it works fine until I hit the second module further into the application (which is when I get the duplicate error from above).

What is going wrong here??

2

Personally I’m yet to be convinced that all this modulizing is a net improvement in my life, so I have largely chose to avoid it so far. If you insist on trying to do it, though, the problem with ngIf is likely with insufficient imports in SharedModule: specifically, not including Angular’s CommonModule. You will run into similar problems with Ionic components, where IonicModule must be imported.

3

Thanks @rapropos, I kind of had a feeling it was due to a lack of those modules inside the sharedmodule, however even including CommonModule and FormsModule I was still hitting errors. Perhaps I missing other modules too. I agree though, that I don’t feel this is the nicest approach.

Would you have a suggestion for an alternative way of handling this situation where I have the PinComponent used in two locations?

4

Put it in the declarations stanza of your AppModule (and entryComponents if it gets used as a modal), and just drop a bomb on all the other modules.

5

If I just put this into the AppModule like so:

@NgModule({
    declarations: [
      ...
        PinComponent
    ],
    entryComponents: [
        ...
        PinComponent
    ],
    imports: [
        ...
    ],
    bootstrap: [AppComponent],
    exports: [
        PinComponent
    ]
})
export class AppModule {

  constructor() {
  }

}

It works ok for the initial use, but when I go to the page that uses the other module I get this error app-pin-component' is not a known element which I assume is happening because the component is not defined. Talk about annoying! It seems silly to me that any child module of AppModule don’t get access to imported components.

Any ideas on a work around?

6

Thou shalt have no other modules but AppModule.

7

Ionic v4 has been a bit of a shock for me, and certainly not an easy upgrade from Ionic 3 as has been touted. Some of the paradigms are new to me, so maybe I am not understanding this completely yet, but…

I am not seeing the benefit of Lazy Loading and finding it more problematic than helpful for my application. So I want to remove all the “other modules”. The problem for me is these are all referenced in the “app-routing.module.ts” in the loadchildren section, so if I remove them I get errors there instead.

So obviously some corresponding changes need to be made throughout the application in order to remove the modules and lazy loading – does anyone have a list of steps to achieve this?

8

I am on Ionic 4 and what a struggle to setup a shared component. Anyone figured this out yet?
Either it’s “Element unknown” of “Component referenced by 2 modules”