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

Question

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

我已经创建了两个 plunker，一个没有共享模块，另一个是修改后的 plunker。初始代码可以在这里找到 link; https://plnkr.co/edit/VrEe5S54rEkKipuGLsQs?p=info

然后我进行了以下更改。

创建共享模块（见下面的代码）
已将 PageNotFoundComponent 添加到 SharedModule
已更新app.module.ts

一个。注释掉 FormsModule

b。注释掉 PageNotFoundComponent

c。导入的共享模块
已更新应用-routing.module.ts

一个。注释掉 PageNotFoundComponent

请注意，我试图通过不向共享模块添加太多组件以及不在可能使用共享模块的所有地方使用共享模块来保持简单。

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

Shared Module的代码如下：

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' 文件夹中，但它正试图从同一目录加载非 found.component。

看看你的 plunker，not-found.component 在 'app' 文件夹中。

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

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

Angular 2 Reusing Components with Shared Modules

angular

module

reusability