Angular Shared Module import does not import mentioned modules

Question

I have added shared module to my app. It looks pretty simple.

const imports = [
    CommonModule,
    RouterModule,
    BrowserModule,
    FormsModule, ReactiveFormsModule
];


@NgModule({imports})

export class SharedModule {}

When I import my shared module into another module it does not see my imported staff. I get error like this "Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ,which means that FormsModule is not imported correctly. If I import that basic modules directly into my app module it works OK.

Your help and advises are highly appreciated.

Answer 1

Most likely you will need to also export those modules.

Typically:

@NgModule({
    imports: [
        SomeModule
    ],
    declarations: [
        ...
    ],
    exports: [
        SomeModule,
    ]
});

Also see this angular doco...

By re-exporting CommonModule and FormsModule, any other module that imports this SharedModule, gets access to directives like NgIf and NgFor from CommonModule and can bind to component properties with [(ngModel)], a directive in the FormsModule.

Answer 2

You have to export the dependency modules which used inside the shared module in order to use the shared module from some where else which does not import those dependencies.

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CustomerComponent } from './customer.component';

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