Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 6 - Importing shared module for child modules

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?

like image 833
user8778731 Avatar asked May 06 '18 18:05

user8778731


People also ask

Where should you import a shared module Angular?

Add the SharedModule in the imports section of the AppModule .

How do I pass data from one module to another in Angular 6?

You can import MemberCardModule into AppModule directly. Or import into ShareModule and import ShareModule into AppModule. It is important to import Modules into AppModule. And then you can you MemberCardModule.

How do you use the parent module component in a child module?

You should export the components of the parent module, you want to use in the child module. Then import the parent module in the child module. Show activity on this post. It would have been great , if you can share the code and the specified the error you are getting.

Can two modules import each other in Angular?

Sharing moduleslinkYou can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your application.


1 Answers

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,
like image 115
Adrian Fâciu Avatar answered Oct 07 '22 00:10

Adrian Fâciu