在一個已有的 Storefront 上，使用命令行：ng add @spartacus/schematics --ssr
最後使用下列命令行，可以成功啓動（記得先 build）：
在現代的前端開發過程中，Angular 端到端的解決方案已經成為了許多開發人員和團隊的首選框架之一。Angular 不僅提供了一個健壯的平台來構建複雜的客户端應用，還通過各種工具和庫，如 Angular Schematics，進一步提升了開發效率和質量。瞭解 Angular Schematics 的概念、工作原理及其使用方法，對於希望提高開發效率的 Angular 開發者來説是非常有價值的。
Angular Schematics 是一個強大的工具集合，用於自動化開發工作流程，如生成新的組件、服務、模塊等，並對現有項目進行重構和更新。Schematics 的設計初衷是提供一種簡單、高效且可靠的方式來修改項目代碼，同時確保代碼的一致性和質量。通過定義一系列的規則和模板，Schematics 能夠在開發過程中自動執行復雜的修改，大幅度減少了手動編碼的需求和可能出現的錯誤。
Schematics 的工作原理
Schematics 工具通過讀取一套預定義的模板和規則來工作。這些模板和規則描述瞭如何生成新的文件或如何修改現有的文件，以適應特定的編碼標準或項目結構。例如，當使用 Schematics 來生成一個新的 Angular 組件時，它會創建包含組件類文件、樣式表和測試文件的文件夾，所有這些都基於預定義的模板。
開發者可以通過 Angular CLI 來使用 Schematics，只需簡單地執行相應的命令即可。例如，執行 ng generate component my-component 命令時，Angular CLI 會調用 Schematics 來生成一個新的組件，並將其添加到項目中。
自定義 Schematics
除了 Angular 團隊提供的標準 Schematics 外，開發者還可以創建自定義 Schematics，以滿足特定項目的需求。自定義 Schematics 允許開發者定義特定的生成規則和模板，這樣可以在多個項目之間複用代碼和最佳實踐，提高開發效率。
創建自定義 Schematics 需要一定的瞭解和學習。開發者需要熟悉 TypeScript，因為 Schematics 的定義文件通常是用 TypeScript 編寫的。此外，瞭解 Angular CLI 的工作原理也很重要，因為自定義 Schematics 需要與 Angular CLI 緊密集成。
Schematics 使用示例
假設我們需要在多個 Angular 項目中重複創建具有特定結構和樣式的表單組件。手動創建這些組件不僅耗時而且容易出錯。為了解決這個問題，我們可以創建一個自定義 Schematic，它根據我們的需求自動生成表單組件的代碼框架。
- 創建自定義 Schematics：首先，我們需要安裝
@angular-devkit/schematics-cli工具，然後使用它來創建一個新的 Schematics 項目。在這個項目中，我們定義了生成表單組件所需的模板和規則。 - 定義模板和規則：在 Schematics 項目中，我們創建一個模板文件夾，包含組件的 TypeScript 文件、HTML 文件和 CSS 文件的模板。然後，我們編寫一個規則文件（通常是 TypeScript 文件），指定如何使用這些模板生成新的組件。
- 使用自定義 Schematics：完成自定義 Schematics 的開發和測試後，我們可以通過 Angular CLI 來使用它。例如，通過運行
ng generate my-custom-schematics:form-component --name=my-form命令，Angular CLI 會調用我們的自定義 Schematics 來生成名為my-form的表單組件。
通過以上步驟，我們不僅簡化了重複性工作，還確保了項目中的組件都遵循一致的結構和風格標準。
結論
Angular Schematics 是 Angular 生態中一個強大而靈活的工具，它通過自動化開發任務來提高效率和代碼質量。無論是使用 Angular 團隊提供的標準 Schematics，還是創建符合項目特定需求的自定義 Schematics，都能顯著提升開發工作流程的效率和一致性。通過深入學習和實踐 Schematics，開發者可以更好地掌握 Angular 平台的潛力，為構建高質量的應用打下堅實的基礎。
