Question

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

我已经创建了两个掠夺者，一个没有共享模块，第二个掠夺者在做出更改后。初始代码可以在此链接中找到; https://plnkr.co/edit/VrEe5S54rEkKipuGLsQs?p=info

然后我做了以下更改。

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

一个。注释掉FormsModule

湾注释掉PageNotFoundComponent

℃。导入的SharedModule
更新了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'文件夹。

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

1 个答案: