Angular 2 повторное использование компонентов с общими модулями

Я пытаюсь уменьшить избыточный код в моем приложении путем объединения компонентов, используемых в нескольких модулях, в общий модуль. Я следовал за угловым столбом, https://angular.io/docs/ts/latest/guide/ngmodule.html#! # shared-module . Похоже, что я пропустил шаг, потому что приложение зависает, когда я делаю описанные изменения.

Я создал два плунжера, один без общего модуля и второй плунжер после внесения изменений. Инициал код можно найти по этой ссылке; https://plnkr.co/edit/VrEe5S54rEkKipuGLsQs?p=info

1. созданный общий модуль (см. код ниже)


2. добавлен компонент Pagenotfound в SharedModule


3. 
   

   Обновлено приложение.модуль.ts

   
   
   

   A. прокомментировал FormsModule

   
   
   

   B. прокомментировал PageNotFoundComponent

   
   
   

   C. Импортированный SharedModule

   
   


4. 
   

   Обновлена маршрутизация приложений.модуль.ts

   
   
   

   А. Прокомментировал PageNotFoundComponent

   
   

Обратите внимание, что я пытался сохранить его простым, не добавляя слишком много компонентов в общий модуль и не используя общий модуль везде, где он мог бы использоваться.

Код для общего модуля выглядит следующим образом:

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

Цените любые мысли о том, какие шаги я пропускаю или что я такое делать зло.