# 使用 Angular 打造 Static Site Generator - 黃升煌(Mike Huang)

{%hackmd @HWDC/BJOE4qInR %}

>#### 》[議程介紹](https://hwdc.ithome.com.tw/2024/lab-page/3236)
>#### 》[填寫議程滿意度問卷｜回饋建言給辛苦的講者](https://forms.gle/BrV7WKzsX4fZvTgR8)

* [Slide](https://drive.google.com/file/d/1I_lQyH3TS2BgqiHTJ6YDmA3mWeemnWvj/view?usp=sharing)
* [Demo](https://github.com/wellwind/hwdc-24-angular-ssg)
* [額外的 repo 參考](https://github.com/wellwind/wellwind.github.io)

## setting 介紹

SSR相關的設定
`app.cconfig.ts`中：

- `provideClientHydration()`: 減少畫面閃爍

## prerender
剛剛的 markdown中沒有被 render成 HTML, SSG的主軸就這個，所以要來設定讓 Angular 知道 `:slug` 怎麼預先 generate

## automate
用 angular schematics 來自動化上述要加檔案等等的行為

## lifecycle
新的 Angular `afterRender()`，將任何DOM操作的行為，e.g., gen chart 放在裡面，避免伺服器渲染