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. 将 PageNotFoundComponent 添加到 SharedModule

3. 更新了 app.module.ts

   一个。注释掉 FormsModule

   注释掉 PageNotFoundComponent

   导入共享模块

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”文件夹。