Angular 2使用共享模块重用组件

我试图通过将多个模块中使用的组件整合到一个共享模块中来减少应用程序中的冗余代码。我在沿着有棱角的柱子走。我似乎遗漏了一个步骤，因为当我进行所描述的更改时，应用程序挂起

我已经创建了两个插件，一个没有共享模块，另一个在修改后。初始代码可在此链接中找到

然后我做了以下修改

已创建共享模块（请参阅下面的代码）

将PageNotFoundComponent添加到SharedModule

更新的app.module.ts

a。注释掉FormsModule

b。已注释掉的PageNotFoundComponent

c。导入的SharedModule

更新的app-routing.module.ts

a。已注释掉的PageNotFoundComponent

请注意，我试图通过不向共享模块添加太多组件和不在任何可能使用共享模块的地方使用共享模块来保持它的简单性

有这些变化的Plunker可以在这个链接中找到

共享模块的代码如下所示：

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

感谢您对我遗漏的步骤或我做错了什么的想法。

错误是：

Error loading https://run.plnkr.co/5Q7FuGzCTzE1DQOa/app/shared/not-
found.component.ts as "./not-found.component" from 
https://run.plnkr.co/5Q7FuGzCTzE1DQOa/app/shared/shared.module.ts

因此shared.module.ts位于“app/shared”文件夹中，但它正在尝试从同一目录加载not-found.component

查看您的plunker，未找到的组件位于“app”文件夹中

---

我认为您需要将未找到的组件移动到“app/shared”文件夹。

很好。我在shared.module中进行了更改，以查找not-found.component目录，从“../not-found.component”导入{PageNotFoundComponent}；但仍然不起作用。由于这不起作用，我将文件not-found.component.ts移动到共享文件夹中，它仍然不起作用。我不能说我已经找到了答案，但根据我尝试过的许多组合，我总结出两件事之一。要么是有一个bug不允许我在我的情况下使用共享组件，要么是我在使用共享组件时遇到了限制。在我的情况下，我共享的组件是从路由模块中调用的，该模块要么是延迟加载的，要么是选择性预加载的。我很想知道其他人是否在类似情况下遇到过同样的问题，以及采取了哪些措施来解决这个问题。