AppModule宣告的元件跨模組使用

General
1

已經有放在exports陣列了，但是在使用loadchild載入的模組仍無法辨識，這個自訂的元件。想請問箇中的關鍵是？

// AppModule
@NgModule({
  declarations: [FooterComponent],
  exports: [FooterComponent]
})

// AppRoutingModule
const routes: Routes = [
  {
    path: 'home',
    loadChildren: 'app/home/home.module#HomeModule'
  }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

在HomeModule內宣告的元件模板內無法使用FooterComponent判斷

1個讚
2

有這部分的程式碼嗎? 可以貼上來看看. 這樣子會比較容易看出原因

我的猜測，是你要 lazyloading 的那個module, 沒有 import 你想使用的自訂元件所屬的模組，所以才會找不到

3

所以還需要再imports就對了，剛轉NG2，對2的模組系統還不是太了解。我測試看看。
可是如果宣告的元件在AppModule內也還是需要import？

還是，如果應該儘量不要元件宣告在AppModule內，如果有些需要共用的元件應該宣告在ShareModule比較好。

4

只要是 directive/ component/ pipe 這一類的元件，遇到跨模組使用的情況, 都需要重新 Import 至 module 內

所以這邊的作法會是將那些需要重複使用的 component/directive/pipe 另外包成一個 ShareModule, 並將元件 export 出來。
這樣子，其他模組就只要在 import 那個 ShareModule 即可

至於 service 的部分就不需要了，只要在做上層的 provider 內設定一次即可。

相關的說明文件在此 連結

1個讚
5

這要看你的專案架構了。但基本上是這個原則沒錯

1個讚
6

這部分有讀到，只是這裡想說是不是可以直接在AppModule宣告之後，所有的子模組都可以直接用（偷懶），結果發現不行。

7

沒有 lazyloading 的話，就可以了。 :sunglasses:
我錯了，即使沒有 lazyloading, 跨 module 就不行了。
所以共用的元件還是得單獨抽出來為一個共用 module，以方便 import 使用

8

原來如此，關鍵點在lazyloading。AppModule宣告的元件子模組還是能用，官方的文件如果沒有看熟真的很容易撞牆…

1個讚
9

這部分我確認一下好了，熊熊間有點搞混。
我很確定 lazyloading 一定是不行。我來測一下非 lazyloading 但跨 module 的情形

10

感恩啊~~ :grin:

11

如果搭配動態加載機制，可行嗎？

12

要 rootModule 有設定好，我認為是可行的

1個讚