Angular 6 - Importing shared module for child modules

Question

I'm trying to make a shared module, but it's don't want to work somehow.

The shared module looks like this:

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SharedMetaModule } from './shared-meta';
import { ApplicationState } from './state/application-state';
import { MilitaryTimePipe } from './pipes/military-time-pipe';
import { KeysPipe } from './pipes/object-pipe';
import { GirlsClass } from './advertisers/girls';

@NgModule({
    imports: [CommonModule],
    declarations: [
        KeysPipe,
        MilitaryTimePipe
    ],
    exports: [
        SharedMetaModule,
        KeysPipe,
        MilitaryTimePipe
    ],
    providers: [ApplicationState]
})
export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return { ngModule: SharedModule };
    }
}

I have an app.module.ts like this:

import { SharedModule } from '@shared/shared.module';
@NgModule({
    imports: [
        ...
        SharedModule.forRoot(),

Then I have a profile-gallery.module.ts where a pipe from the shared module would be used.

If I don't import the shared module in the profile-gallery module I got this error:

The pipe 'keys' could not be found.

If I import the shared module to the profile-gallery module I got this error:

MetaModule already loaded; import in root module only.

How could work the shared module in this situation?

Answer 1

The purpose of a Shared module is to import it in all the required modules, more than once. So there is no need for the forRoot method that makes sure it's imported only once.

Remove the forRoot method entirely and import the module where needed:

import { SharedModule } from '@shared/shared.module';
@NgModule({
    imports: [
        ...
        SharedModule,