Sharing Modules Angular 6

> Back to Module Updates
> Angular 6 Samples

We created recipes feature module and recipes routing module via this step. During this process we have broken the Manage Recipes dropdown and Manage dropdown in the top bar. We'll fix this feature in this section.

For this, create a new module in src > app folder and name it app.shared.module.ts.

In the declarations sections we'll add all components, directive and pipes etc that we want to share across modules.

We'll need to export the DropDownDirective to be available to other modules.

Also export CommonModule, putting it in imports array is not necessary but if we want to we can do it as well.

Here is the full code

import { NgModule } from "../../node_modules/@angular/core";
import { CommonModule } from "../../node_modules/@angular/common";

//Directives
import { DropDownDirective } from './shared/directives/drop-down/drop-down.directive';

//exporting CommonModule, putting it in imports array is not necessary but if we want to we can do it as well.

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

With the above in place, go to app module and import SharedModule. Make sure to remove it from the declarations section sine we can only declare it once.

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    SharedModule //this has our DropDownDirective
  ],
  providers: [...],
  bootstrap: [AppComponent]
})

Now go to the app.recipies.module.ts and add the shared module to the imports array.

import { SharedModule } from "./app.shared.module"; //has DropDownDirective

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...,
        SharedModule  //has DropDownDirective
    ]
})

With the above changes in, run the app and Manage Recipe and Manage dropdowns shuld be working as expected.


> Back to Module Updates
> My Recipes Angular 6 Project
> Angular Samples
> Angular 6 Samples