前面說了這麼多，都還沒介紹到子模組，模組能幹嘛呢？
就是能把應用程式建立成高內聚低耦合的一個好用功能，說穿了就是每個模組都各自處理各自的事情，那達到這樣的效果有什麼好處呢？
1.程式碼不會有牽一髮動全身的問題，可以有效提升程式碼品質
2.由於模組之間沒有互相依賴的問題，因此可以進行延遲載入、預先載入的功能
那什麼又是互相依賴呢？A元件中載入了B元件，有A就會有B的情況，即是依賴。
這樣不好嗎？當然不好！
萬一這個元件C也拿去用來載入B，而需求卻在未來某天發生變化，要替C加入某個功能，而這個功能源自於B，這時才發現改B壞A，救回A又不符合C的需求，最後把程式碼抽開來寫，又變成重複製造輪子，你說這樣的程式碼好維護嗎？
說這麼多，趕快來寫Code比較實在！
輸入：ng g m article --routing
並且在底下再建立一個food的元件
輸入：ng g c article/food
接著打開 article-routing.module.ts這支檔案，會發現其實跟原本的app-routing.module.ts很像，沒錯！這也是路由設定檔，並且這支檔案是獨立運作的，但通常會拿來做同名模組的設定就是。
首先將原本app的預設路由移除，只留下這個路由
{ path: 'MyPage/:type', component: Page2Component, canActivate: [LoginGuard]},
接著再打開article-routing.module.ts，在路由中加入
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//新增加的引用
import { FoodComponent } from './food/food.component';
const routes: Routes = [
// 我是路由
{ path: 'article/food', component: FoodComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ArticleRoutingModule { }
注意這邊的路徑，由於檔案本身是在atricle的資料夾底下，所以可以直接跳過article的資料夾路徑
存檔後去再輸入這個路徑看看
http://localhost:4200/MyPage/123?Type=123
這時原本的路由應該要可以正確載入頁面。
再輸入article/food會發現轉回首頁了
http://localhost:4200/article/food
原因是因為目前的路由還沒有被載入設定中，現在就來把加入路由設定吧！
打開app.module.ts中加入模組
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';
import { LoginGuard } from './login.guard';
// 引入使用
import { ArticleModule } from './article/article.module'
@NgModule({
declarations: [
AppComponent,
Page1Component,
Page2Component
],
imports: [
BrowserModule,
// Article引用模組，會一併載入路由設定檔
// 注意！宣告位置的順序會影響載入的順序，因此也會影響到路由的讀取順序！
ArticleModule,
AppRoutingModule
],
providers: [
LoginGuard
],
bootstrap: [AppComponent]
})
export class AppModule { }
存檔後=>輸入
http://localhost:4200/article/food
很好沒有反應！
這是因為我們修改的檔案是設定檔，因此我們必須先把站台重啟才行，來一下npm start吧！
重啟後再輸入網址，會發現已經載入到另外一個模組啦～
歡迎您的加入，讓這個社群更加美好！