」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 安全地試驗 Angular 現有專案的開發人員指南

安全地試驗 Angular 現有專案的開發人員指南

發佈於2024-08-07
瀏覽:345

在不中斷現有專案的情況下探索 Angular 18

我最近正在開發 Angular 17 項目,並渴望探索 Angular 18 令人興奮的新功能。但是,我希望以一種不會影響已經投入生產或正在運行的現有項目的方式來實現這一點。品質檢查階段。這提出了一些挑戰:

  • 全域 Angular 17: 我在全域安裝了 Angular CLI 版本 17。
  • Angular 18 需求: Node.js 版本 18.19 或更高版本是 Angular 18 的先決條件。
  • 保留現有項目:我需要保持現有的 Angular 17 項目不變。

利用節點版本管理器 (NVM):

為了解決這個問題,我決定利用節點版本管理器(NVM)。 NVM 可讓您管理系統上的多個 Node.js 版本,讓您可以輕鬆地在不同專案之間進行切換。我的設定方法如下:

  1. 安裝NVM:您可以按照NVM官網的說明在這裡下載並安裝。

  2. 安裝 Node.js 18 : 安裝 NVM 後,我使用了指令

nvm install latest 

這安裝了最新的 Node.js 版本(當時是 22.4.1)。

創造單獨的開發環境:

接下來,我為我的 Angular 18 實踐專案創建了一個單獨的目錄。這有助於將環境與我現有的專案隔離。

本地安裝 Angular 18:

要為此特定項目安裝 Angular 18,我使用了以下命令:

npm install @angular/cli@latest 

注意缺少 -g。這會在專案目錄中本地安裝最新的 Angular CLI 版本(當時是 18.1.0),而不影響全域安裝。

驚喜!還沒有完全實現:

Angular 17 (Global installation)

當我嘗試使用 ng newpractice-project 建立新專案時,它預設使用全域安裝的 Angular CLI 版本 (17)。這就是 npx 的魔力所在。

介紹節點套件執行器(npx):

npx 允許您從 npm 執行套件,而無需全域安裝它們。事實證明,這是在我的新專案中使用特定 Angular CLI 版本 (18) 的關鍵。這是獲勝命令:

npx @angular/cli@18 new my-angular-18-project

我透過執行 ng version 來驗證專案

Angular 18 (Local configured)

成功!探索 Angular 18:

等待安裝必要的依賴項後,我有一個全新的 Angular 18 專案(my-angular-18-project)準備就緒!這使我能夠探索 Angular 18 的所有新功能,包括令人興奮的 @let 語法,而不會幹擾我現有的 Angular 17 專案。

版本聲明 本文轉載於:https://dev.to/ingila185/safely-experiment-with-angular-18-a-guide-for-developers-with-existing-16-17-projects-3c3?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何修復 Matplotlib 中的「無顯示名稱且無 $DISPLAY 環境變數」錯誤?
    如何修復 Matplotlib 中的「無顯示名稱且無 $DISPLAY 環境變數」錯誤?
    "_tkinter.TclError: no display name and no $DISPLAY 環境變數"使用Matplotlib 執行Python 腳本時通常會發生此錯誤腳本時通常會發生此錯誤腳本時通常會發生此錯誤在沒有圖形顯示的伺服器上。 Matplotlib 依賴後...
    程式設計 發佈於2024-11-05
  • 您的第一個使用 Node.js 的後端應用程式
    您的第一個使用 Node.js 的後端應用程式
    您是否正在學習 Web 開發並對如何啟動 Node.js 專案感到困惑?別擔心,我有你!我將指導您只需 5 個步驟即可使用 Node.js 和 Express.js 建立您的第一個後端。 ️5個關鍵步驟: 第 1 步:設定項目 第 2 步:整理資料夾 第3步:建立server.js...
    程式設計 發佈於2024-11-05
  • 跨域場景下CORS何時使用預檢請求?
    跨域場景下CORS何時使用預檢請求?
    CORS:了解跨域請求的「預檢」請求跨域資源共享(CORS) 在製作HTTP 時提出了挑戰跨域請求。為了解決這些限制,引入了預檢請求作為解決方法。 預檢請求說明預檢請求是先於實際請求(例如 GET 或 POST)的 OPTIONS 請求)並用於與伺服器協商請求的權限。這些請求包含兩個附加標頭:Acc...
    程式設計 發佈於2024-11-05
  • 如何使用 PHP 的 glob() 函數以副檔名過濾檔案?
    如何使用 PHP 的 glob() 函數以副檔名過濾檔案?
    在 PHP 中以副檔名過濾檔案使用目錄時,通常需要根據副檔名擷取特定檔案。 PHP 提供了一種使用 glob() 函數來完成此任務的有效方法。 若要以副檔名過濾文件,請使用語法:$files = glob('/path/to/directory/*.extension');例如,要檢索目錄/path...
    程式設計 發佈於2024-11-05
  • 理解 JavaScript 中的 Promise 和 Promise Chaining
    理解 JavaScript 中的 Promise 和 Promise Chaining
    什麼是承諾? JavaScript 中的 Promise 就像你對未來做某事的「承諾」。它是一個對象,表示非同步任務的最終完成(或失敗)及其結果值。簡而言之,Promise 充當尚不可用但將來可用的值的佔位符。 承諾國家 Promise 可以存在於以下三種狀態之一...
    程式設計 發佈於2024-11-05
  • 安全分配
    安全分配
    今天,關於 JavaScript 中安全賦值運算子 (?=) 的新提案引起了熱烈討論。我喜歡 JavaScript 隨著時間的推移而不斷改進,但這也是我最近在某些情況下遇到的問題。我應該將快速範例實作作為函數,對吧? 如果您還沒有閱讀該提案,以下是其建議: const [error, value]...
    程式設計 發佈於2024-11-05
  • 建立隊列介面
    建立隊列介面
    建立字元隊列的介面。 需要開發的三個實作: 固定大小的線性隊列。 循環隊列(複用數組空間)。 動態隊列(根據需要成長)。 1 建立一個名為 ICharQ.java 的檔案 // 字元隊列介面。 公共介面 ICharQ { // 向佇列中插入一個字元。 void put(char...
    程式設計 發佈於2024-11-05
  • Pip 的可編輯模式何時對本機 Python 套件開發有用?
    Pip 的可編輯模式何時對本機 Python 套件開發有用?
    使用Pip 在Python 中利用可編輯模式進行本地包開發在Python 的包管理生態系統中,Pip 擁有“- e”(或'--editable') 特定場景的選項。什麼時候使用這個選項比較有利? 答案在於可編輯模式的實現,官方文件中有詳細說明:「從本地以可編輯模式安裝專案(即setu...
    程式設計 發佈於2024-11-05
  • 當您在瀏覽器中輸入 URL 時會發生什麼?
    當您在瀏覽器中輸入 URL 時會發生什麼?
    您是否想知道當您在瀏覽器中輸入 URL 並按 Enter 鍵時幕後會發生什麼?這個過程比您想像的更加複雜,涉及多個步驟,這些步驟無縫地協同工作以提供您請求的網頁。在本文中,我們將探討從輸入 URL 到查看完全載入的網頁的整個過程,闡明使這一切成為可能的技術和協定。 第 1 步:輸入...
    程式設計 發佈於2024-11-05
  • 如何有效管理大量小HashMap物件的「OutOfMemoryError:超出GC開銷限制」?
    如何有效管理大量小HashMap物件的「OutOfMemoryError:超出GC開銷限制」?
    OutOfMemoryError: Handling Garbage Collection OverheadOutOfMemoryError: Handling Garbage Collection Overhead在Java中,當過多時會出現「java.lang.OutOfMemoryError:...
    程式設計 發佈於2024-11-05
  • 為什麼在 Python 列表初始化中使用 [[]] * n 時列表會連結在一起?
    為什麼在 Python 列表初始化中使用 [[]] * n 時列表會連結在一起?
    使用[[]] * n 進行列表初始化時的列表連結問題使用[[]] 初始化列表列表時 n,程式設計師經常會遇到一個意想不到的問題,即列表似乎連結在一起。發生這種情況是因為 [x]n 語法建立對相同基礎清單物件的多個引用,而不是建立不同的清單實例。 為了說明該問題,請考慮以下代碼:x = [[]] * ...
    程式設計 發佈於2024-11-05
  • Python 變得簡單:從初學者到進階 |部落格
    Python 變得簡單:從初學者到進階 |部落格
    Python Course Code Examples This is a Documentation of the python code i used and created , for learning python. Its easy to understand and L...
    程式設計 發佈於2024-11-05
  • 簡化 TypeScript 中的類型縮小和防護
    簡化 TypeScript 中的類型縮小和防護
    Introduction to Narrowing Concept Typescript documentation explains this topic really well. I am not going to copy and paste the same descrip...
    程式設計 發佈於2024-11-05
  • 何時應該使用 session_unset() 而不是 session_destroy() ,反之亦然?
    何時應該使用 session_unset() 而不是 session_destroy() ,反之亦然?
    理解PHP 中session_unset() 和session_destroy() 的區別PHP 函數session_unset() 和session_destroy() 有不同的用途管理會話數據。儘管它們在清除會話變數方面有明顯相似之處,但它們具有不同的效果。 session_unset() 與s...
    程式設計 發佈於2024-11-05
  • 如何選擇在 C++ 中解析 INI 檔案的最佳方法?
    如何選擇在 C++ 中解析 INI 檔案的最佳方法?
    在C 中解析INI 檔案:各種方法指南在C 處理初始化(INI) 檔案時,開發人員經常遇到有效解析這些文件以提取所需資訊的挑戰。本文探討了用 C 解析 INI 檔案的不同方法,討論了它們的優點和注意事項。 本機 Windows API 函數一種方法是利用 Windows API 函數INI 檔案處理...
    程式設計 發佈於2024-11-05

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3