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

Question

我试图通过将多个模块中使用的组件合并到一个共享模块中来减少我的应用程序中的冗余代码。我正在关注 Angular 帖子，https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module。我似乎错过了一个步骤，因为当我进行所描述的更改时应用程序挂起。

我创建了两个 plunker，一个没有共享模块，另一个在更改后创建了 plunker。初始代码可在此链接中找到； https://plnkr.co/edit/VrEe5S54rEkKipuGLsQs?p=info

然后我进行了以下更改。

1. 已创建共享模块（参见下面的代码）
2. 向 SharedModule 添加了 PageNotFoundComponent

3. 更新了 app.module.ts

   一个。注释掉 FormsModule

   b.注释掉 PageNotFoundComponent

   c。导入的 SharedModule

4. 更新了 app-routing.module.ts

   一个。注释掉 PageNotFoundComponent

请注意，我尽量保持简单，不向共享模块添加太多组件，也不在任何可能使用共享模块的地方使用共享模块。

可以在此链接中找到具有这些更改的 Plunker； https://plnkr.co/edit/I4ArEQTniO7MJtfzpBWl?p=info

共享模块代码如下：

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

感谢任何关于我缺少哪些步骤或我做错了什么的想法。

Answer 1

错误是：

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，not-found.component 位于“app”文件夹中。

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