Featue Module for Recipes Angular 6

> Back to Module Updates
> Angular 6 Samples

In this example we'll build a new feature module and will then move the "recipes" related components to this feature module.

Right click on the app folder and create a new file, name it app.recipes.module.ts.

We need to export a class and also need to add NgModule decorator, make sure to import it as well.

import { NgModule } from "@angular/core";

@NgModule({
   
})

export class RecipesModule{

}

Other Modules

In this example, we have only used ReactiveFormsModule in recipes form. For the shopping list we are using Template Driven Forms. So move  ReactiveFormsModule as well.

We also need to import CommonModule so that we can have access to common pieces like ngFor and ngIf.

Handling Routes

We are using router-outlet in recipes template, so routing will become an issue. We moved the routes out of the app module to its own module via this step. Since we are creating a feature module, we also need to move the routes to the feature module. To over come this, we'll create a new recipes routing module under src > app folder and will name it app.recipes.routing.module.ts. Here is the full code for this new routing module - take note of using imports: [RouterModule.forChild(appRecipesRoutes)]. Since we are not in the app module any more, we have to use forChild here.

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

import { Routes, RouterModule } from "@angular/router";

import { RecipesComponent } from "./recipes/recipes.component";
import { RecipeStartComponent } from "./recipes/recipe-start/recipe-start.component";
import { RecipeDetailComponent } from "./recipes/recipe-detail/recipe-detail.component";
import { RecipeEditComponent } from "./recipes/recipe-edit/recipe-edit.component";
import { AuthGuard } from "./shared/services/auth-guard.service";

const appRecipesRoutes: Routes = [
    { path: 'recipes', component: RecipesComponent, children: [
        //catch all => currenlty set trough *ngIf and local reference in recipes templete need to be router-outlet
        { path: '', component: RecipeStartComponent },
        //adding a new recipe, this needs to come before recipe detail component where we pass the :id
        { path: 'new', component: RecipeEditComponent, canActivate: [AuthGuard] },
        //for selecting a recipe, we will be passing a an id, the link will be like /recipe/1
        { path: ':id', component: RecipeDetailComponent },
        //editing a recipe
        { path: ':id/edit', component: RecipeEditComponent, canActivate: [AuthGuard] }
    ] }
];

@NgModule({
    imports: [RouterModule.forChild(appRecipesRoutes)],
    exports: [RouterModule]
})

export class RecipesRoutingModule{}

With the above in place, go to app recipes module and add to the imports section.

App Recipes Module

Here is the full code for the app recipes modules.

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

//components
import { RecipesComponent } from './recipes/recipes.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';

//recipes section routes
import { RecipesRoutingModule } from "./app.recipes.routing.module";


@NgModule({
    declarations: [
        RecipesComponent,
        RecipeListComponent,
        RecipeDetailComponent,
        RecipeItemComponent,
        RecipeStartComponent,
        RecipeEditComponent
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        RecipesRoutingModule //recipes related routes
    ]
})

export class RecipesModule{}

Now add this module to the app modules imports section and import it as well.

import { RecipesModule } from './app.recipes.module'; //this has the components and routing for the recipes

@NgModule({
  declarations: [
    ...,
    DropDownDirective
  ],
  imports: [
    ..,
    RecipesModule //this has the components and routing for the recipes
  ],
  providers: [...],
  bootstrap: [AppComponent]
})

If we run the app now, all should be working but we have a small issue. The manage recipes dropdown and Manage dropdown in the top bar has stopped working. We'll fix this in the sharing modules section.

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