上一篇文章有提到一些這次專案會用到的模組，本篇簡單把他實作一遍。

建立 feature modules

用 terminal 開啟該專案的資料夾後，輸入以下指令就可以馬上建立出我們要的功能模組，其中前三項因為加了 --routing，所以會把路由模組一起建立出來

ng g m merchant --routing
ng g m product --routing
ng g m activity --routing
ng g m layout 

由下圖可以看到，Angular CLI 會幫我們建立好模組需要的檔案與資料夾

建立 core module

聰明如你，一定知道要怎麼再新增一個模組，這裡要特別注意的是 core module 不需要路由模組的，所以輸入下面指令

ng g m core 

此外，只能被 app module 所引用，所以我們要在 core.module.ts 中的 class 加入以下程式碼

export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(
        'Core is already loaded. Import it in the AppModule only'
      );
    }
  }
}

在這裡可以注意到@Optional() @SkipSelf() 兩個裝飾子，
@Optional() 代表著這個依賴項是可選的，如果沒有找到 ElementInjector，就也不會報錯。
@SkipSelf() 代表除了自己以外的 ElementInjector，再向上找父級的ElementInjector，而不是當下的。
組合在一起的意思大概就是，如果我在其他的子模組(有可能是功能模組)匯入此模組時，要往上找上一層級的模組(app module)是否有 core module，如果沒有就沒事，有的話就會拋出錯誤。（主要是針對懶載入的模組匯入 core module 時才會拋出錯誤）

建立 shared module

shared module 也是一樣用一下指令，也不需要路由模組

ng g m shared 

在這裡我會在 shared module 裡再建立 material module，這麼模組主要管理 material 套件

cd ./src/app/shared 
ng g m material 

匯入 Material 套件

Material 的網站有詳細說明如何安裝，這邊快速用以下指令來把它加到專案裡

ng add @angular/material

這個指令會幫我們設定顏色的主題、字體、動畫等等，並很自動的幫我們修改 app.module.ts、angular.json、src/index.html、src/styles.scss 檔案，省去我們匯入一些模組與 css 的步驟。

更新 material.module.ts

這裡先將我們專案可能會用到的模組通通會進這個模組裡，除了加到 @NgModule 裡的 imports 以外，記得還要加到 exports，這樣引用這個 material module 的模組才能使用套件的東西。

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatCardModule } from '@angular/material/card';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatChipsModule } from '@angular/material/chips';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatMenuModule } from '@angular/material/menu';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';
import { MatExpansionModule } from '@angular/material/expansion';

@NgModule({
  imports: [
    MatButtonModule,
    ... 省略
    MatExpansionModule,
  ],
  exports: [
    MatButtonModule,
    ... 省略
    MatExpansionModule,
})

調整 shared module

shared module 裡面的東西大多是給其他功能模組使用的，所以一些通用的東西(表單等等...)在這裡先匯入後，其他有匯入 shared module 的模組就不需匯入了

import { MaterialModule } from './material/material.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [CommonModule, MaterialModule, FormsModule, ReactiveFormsModule],
  exports: [CommonModule, MaterialModule, FormsModule, ReactiveFormsModule],
})
export class SharedModule {}

結語

模組實作的重點在這裡大概說完了，直接看文章實在很難馬上理解，所以可以搭配在 github上程式碼會更好懂，接下來要講 Angular Component 的部分了。