Angular 2重用带有共享模块的组件

Question

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

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

然后，我进行了以下更改。

1. 创建共享模块（请参见下面的代码）
2. 将PageNotFoundComponent添加到SharedModule

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”文件夹中，但是它试图从同一目录加载notfound.component。

看着您的监听器，notfound.component位于“ app”文件夹中。

我相信您需要将未找到的组件移至“ app / shared”文件夹。