一開始所有元件都堆在 app/ 下,這對學習可以,但要當成作品展示,就要更有架構:
src/app/
├─ core/               # 全域只出現一次的元件/服務(header、footer、auth.service…)
│  ├─ header/
│  ├─ footer/
│  ├─ auth.service.ts
│
├─ shared/             # 共用元件、pipe、directive
│  ├─ pipes/
│  ├─ directives/
│  └─ ui/              # 共用 UI(button, card, modal)
│
├─ features/           # 各功能區域模組
│  ├─ about/
│  ├─ skills/
│  ├─ projects/
│  └─ contact/
│
├─ services/           # domain 資料服務(projects-data, skills-data)
├─ models/             # 型別定義
└─ app-routing.module.ts
這樣結構清楚:core 只初始化一次、shared 重用、features 獨立模組化。
Projects 模組、Contact 模組改成 Lazy:
const routes: Routes = [
  { path: '', redirectTo: 'projects', pathMatch: 'full' },
  { path: 'projects', loadChildren: () => import('./features/projects/projects.module').then(m => m.ProjectsModule) },
  { path: 'contact', loadChildren: () => import('./features/contact/contact.module').then(m => m.ContactModule) },
  { path: '**', redirectTo: 'projects' }
];
👉 好處:首頁載入快,只有進到相應頁才載入模組。
在 app.component.ts 或 Router 事件中動態更新:
import { Meta, Title } from '@angular/platform-browser';
constructor(private meta: Meta, private title: Title) {}
ngOnInit() {
  this.title.setTitle('Chiayu · 前端工程師履歷網站');
  this.meta.addTags([
    { name: 'description', content: 'Chiayu 的作品集與履歷網站,展示 Angular、React、Vue 技能' },
    { property: 'og:title', content: 'Chiayu · 前端工程師履歷網站' },
    { property: 'og:type', content: 'website' }
  ]);
}
例如 Skills 清單可以再拆成:
skill-filter.component.ts
skill-list.component.ts
好處:單一職責,易測試、好維護。
在 angular.json 設定 baseHref:
"baseHref": "/resume-site/"
(假設 repo 名叫 resume-site)
Build:
ng build --configuration production --base-href "/resume-site/"
安裝 gh-pages 工具(或直接用 GitHub Actions):
npx angular-cli-ghpages --dir=dist/resume-site
網址會是:
https://<username>.github.io/resume-site/
ng build --configuration production
把 dist/resume-site/ 上傳到 Vercel(可用 GitHub 連動)
自動分配網址,例如:
https://resume-site.vercel.app
ng build --base-href "/repo-name/"
dist/resume-site
ng build --configuration production
Meta 與 Title
從明天開始 🚀 我們要正式進入 React 實戰養成 (Day 21–27):