Angular 2使用共享模塊重新使用組件

我試圖通過將用於多個模塊的組件合併到共享模塊中來減少應用程序中的冗餘代碼。我正在關注Angular Post，https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module。看起來我缺少一個步驟，因爲當我進行所述更改時，應用程序會掛起。Angular 2使用共享模塊重新使用組件

我已經創建了兩個plunkers，其中一個沒有共享模塊，另一個沒有更改。最初的代碼可以在這個鏈接找到; https://plnkr.co/edit/VrEe5S54rEkKipuGLsQs?p=info

然後我做了以下更改。

創建的共享模塊（見下面的代碼）
添加PageNotFoundComponent到SharedModule
更新app.module.ts

一個。註釋掉FormsModule

b。已註釋PageNotFoundComponent

c。進口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 { }

欣賞什麼步驟我丟失或什麼，我做錯了任何想法。

來源

2017-05-23 j-terranova

的錯誤是：

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是在「應用程序/共享」文件夾，但它試圖從同一目錄加載未found.component。

看着你的運動員，not-found.component在'app'文件夾中。

我相信你需要將未找到的組件移動到'app/shared'文件夾中。

來源

2017-05-23 02:21:24 pixelbits

好的。我在shared.module中進行了更改，找到not-found.component的一個目錄，從'../not-found.component'中導入{PageNotFoundComponent};但仍然無法正常工作。 –

由於這不起作用，我將文件not-found.component.ts移至共享文件夾，但仍然無法正常工作。 –

我不能說我已經找到了答案，但基於我試過的許多組合，我總結了兩件事之一。要麼有一個錯誤，不允許我在我的情況下使用共享組件，或者我已經遇到了使用共享組件的限制。在我的情況下，我共享的組件是從路由模塊中調用的，其中模塊是延遲加載或選擇性預加載的。很想聽聽其他人在類似情況下是否經歷過相同的問題，以及爲解決此問題所做的工作。 –

Angular 2使用共享模塊重新使用組件

回答

相關問題