CODEWITHSUNDEEP
angular
alekoo73
alekoo73

Reputation: 925

Angular Shared Module import does not import mentioned modules

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.

Upvotes: 2

Views: 2430

Answers (2)

Heshan
Heshan

Reputation: 918

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 { }

Upvotes: 1

Zze
Zze

Reputation: 18805

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.

Upvotes: 3

Related Questions