另一篇 Angular 文章，部分配置與環境

在我之前的文章中，我們學習如何產生元件。在繼續之前，我認為我們應該了解一下有關配置和環境的各種概念。

有不同的設定之王：Angular 行為和 Typescript 編譯器。今天我們來看看 Angular 部分，它都在 angular.json 專案中。

此文件描述了您的所有項目，並遵循 Angular CLI 中的架構：/@angular/cli/lib/config/schema.json

「項目」是主要部分。在這個中，您會看到“原理圖”和“架構師”。

架構師描述 CLI 的行為：建置、服務、測試…

示意圖描述如何產生程式碼。這就是我們今天要做的事。

這是我在第一篇文章之後的內容：

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

我們可以看到它包含「scss」作為樣式鍵。這是因為，當我建立專案時，我對 cli 提示字元回答了「scss」。

但我想做更多。通常我更喜歡使用單文件組件模式來建立組件。這就像 VueJS 所做的那樣。您的樣式、html 和打字稿程式碼位於一個檔案中。這是因為它迫使您建立小元件。
為此，請新增以下行： inlineStyle 和 inlineTemplate

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

現在，當您執行 nggenerate component my-new-component 時，它將只建立打字稿檔案。

我們將繼續進行一些最佳化。最佳實踐解釋說，您應該始終將更改檢測設定為“OnPush”。因此，應該在組件生成期間完成。
為此，請新增以下行：changeDetection

"@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true,
    "changeDetection": "OnPush"
  }
},

就是這樣，您現在已經設定了預設的專案程式碼產生。

在先前的 Angular 版本中，您可以定義「standalone: true」。但現在這是預設行為。

我將以環境概念作結。當您建立應用程式時，通常會依賴 API。這些 API 可能在本地提供（當您編寫程式碼時在您的電腦上），但也可以由測試伺服器、預生產伺服器或生產伺服器提供。
所以你必須在變數中設定主機名稱。

Angular 為此提供了一個解決方案：環境。

ng 生成環境

此指令將在您的專案中新增 2 個新檔案：environment.ts 和environment.development.ts
它還會透過在節點「projects.my-new-project.architect.configurations.development」中新增「fileReplacements」陣列來修改您的 angular.json

在建置過程中，它會用所需的環境檔案（例如environment.development.ts）取代所需的environment.ts。

您可以在其中儲存所有特定的環境變量，並在需要的任何地方匯入environment.ts。但請注意不要導入其他環境.*.ts，因為它們在運行時不可用！

這是環境範例：

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

所以你只需要建立一個新的“environment.development.ts”，其中包含所需的變數。然後，更改 angular.json 以在「project.architect.configurations.Production」下新增 fileReplacements 部分，如下所示：

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

在我看來，Angular 應該同時創建開發和生產文件。有點奇怪。

Ho，我忘了說，在 Angular v19 中，你可以在啟動時定義全域變數。這可能是環境概念的替代方案，但它需要在建置過程中進行更多設定。

祝你有美好的一天☁️

[注意] 所有文章均使用 Angular v19*

中的命令

以上是另一篇 Angular 文章，部分配置與環境的詳細內容。更多資訊請關注PHP中文網其他相關文章！