如何在 VS Code 中設定 Angular [指南]

Angular 是一個使用 JavaScript 的開源 Web 應用程式框架。與其他一些框架或程式語言不同，您需要在 Windows 中設定環境變數才能使該框架運作。因此，我們必須學習如何在 VS Code 中設定 Angular並編寫演示程式碼，這就是我們要做的。

如何在 VS Code 中設定 Angular

要在 Windows 電腦上的 VS Code 中設定 Angular，您需要執行下列步驟。

1. 安裝 Visual Studio 程式碼
2. 設定 NodeJS
3. 設定環境變數
4. 安裝角度

讓我們詳細談談它們。

1]安裝Visual Studio程式碼

為了開始 Angular 領域的編碼之旅，我們需要安裝 Visual Studio Code。為了執行相同的操作，您需要訪問code.visualstudio.com並下載適合您的環境的應用程式。下載後，前往下載資料夾，運行安裝介質，然後安裝應用程式。

2]設定NodeJS

需要注意的是，雖然您可以使用 VSCode 編輯 Angular，但無法直接在編輯器中執行它。 Angular 實際上是在 NodeJS 中執行的，NodeJS 是一個 JavaScript 環境，是本地 Web 開發設定的一部分。使用 NodeJS，您可以在本機上的 Web 瀏覽器中執行 Angular。每次你在 VSCode 中對 Angular 程式碼進行更改時，它都會自動在瀏覽器中重新加載，這就是所謂的「熱重載」。但是，由於 Angular 在 NodeJS 中運行，因此您需要先安裝 NodeJS。您可以造訪nodejs.org來完成此操作。

安裝 Node JS 來執行 Angular 時，請選擇一個易於記憶的位置，例如簡單且短的路徑。如果您稍後需要使用 NodeJS，這將會很有幫助。因此，不要將應用程式安裝在 Program 檔案中，而是將其安裝在 D:\NodeJS 中，儘管這並不重要。

3]設定環境變數

接下來，在安裝 Angular 之前，我們需要為 NodeJs 設定環境變數。若要執行相同的操作，請依照下列步驟操作。

• 按Win + S，輸入“環境變數”，然後開啟。
• 完成後，您需要複製 NodeJS 的位置。僅供參考，我們的是 D:\NodeJS。
• 按一下環境變數。
• 現在，在“系統變數”部分中選擇“路徑”，然後按一下“編輯”。
• 按一下“新建”，貼上位置，然後按一下“確定”。

這樣，您就已經輸入了 NodeJS 環境變數。要檢查它是否正常工作，請打開命令提示符，然後運行node –version。如果它給你一個版本，我們就可以安裝 Angular。

4]安裝角度

透過安裝 NodeJS 創建適當的環境後，我們將安裝 Angular。請按照下面提到的步驟執行相同的操作。

• 開啟 Visual Studio 程式碼。
• 使用 CD 或更改目錄命令導航到要建立 Angular 檔案的位置。我們在D盤新建了一個目錄來建立項目，查看附圖。

• 要在資料夾中安裝 Angular，我們需要執行以下命令。npm install -g @angular/cli
• 然後運行以下命令來建立一個新專案。ng new foldername
• 現在，使用“cd資料夾名稱”進入該資料夾並使用ng服務啟動伺服器。

希望現在您可以毫無問題地運行 Angular。

在工作區之外執行 Angular CLI 時，此命令不可用

當我執行“ngserve”命令時，我收到一條錯誤，指出該命令不可用。許多人懷疑他們的系統上沒有安裝 Angular，而實際上，唯一的問題是您沒有位於正確的目錄中。要解決此問題，只需“cd”到專案所在的目錄，而不是根位置，而是實際的專案位置。所以，一開始，當我運行命令時，我位於 AngularProject，這是我的根資料夾，所以它不起作用。但是，當我將目錄更改為 SampleFolder 並運行相同的命令時，它可以無縫運行。

我們建議您執行的解決方法是開啟檔案總管，前往儲存項目的位置，右鍵點選空白螢幕，然後選擇終端機 > 命令提示字元。然後運行 ngserve。

如何在 Visual Studio Code 中設定 Angular 專案？

為了建立 Angular 項目，您首先需要在電腦上安裝 NodeJS。完成後，您需要設定環境變數並使用npm install -g @angular/cli命令安裝 Angular。現在，繼續使用 ng newfoldername 命令建立一個新目錄，要了解更多信息，請查看前面提到的步驟。

如何產生 Angular VSCode？

Angular File Generator 是 Visual Studio Code 的便利擴展，讓您只需點擊幾下即可建立 Angular 檔案。它基於 Angular CLI 構建，並使用與 CLI 相同的原理圖。此外，它還提供了直接從終端產生文件的選項。