Angular 2 Component Reuse Using Shared Modules

I am trying to cut down on redundant code in my application by combining components used across multiple modules into a common module. I followed Angular Post, https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module . It looks like I am skipping a step because the application hangs when I make the described changes.

I created two plunkers, one without the shared module and the second plunker after the changes were made. The starting code can be found at this link; https://plnkr.co/edit/VrEe5S54rEkKipuGLsQs?p=info

Then I made the following changes.

• Created common module (see code below)
• Added PageNotFoundComponent parameter to SharedModule

• Updated app.module.ts

  and. Comments FormsModule

  b. Commented on the pageNotFoundComponent

  from. Imported SharedModule

• Updated app-routing.module.ts

  and. Commented PageNotFoundComponent

Note that I have tried to keep it simple by not adding too many components to the common module and not using the common module wherever it might be used.

Plunker with these changes can be found at this link; https://plnkr.co/edit/I4ArEQTniO7MJtfzpBWl?p=info

The code for a common module looks like this:

import { NgModule }            from '@angular/core';
import { CommonModule }        from '@angular/common';
import { FormsModule }         from '@angular/forms';

import { PageNotFoundComponent }     from './not-found.component';

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

      

        
        
        
      

    

Appreciate any thoughts on what steps I am missing or what I am doing wrong.