」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何在不安裝 Angular CLI 的情況下建立 Angular 專案的特定版本

如何在不安裝 Angular CLI 的情況下建立 Angular 專案的特定版本

發佈於2024-11-07
瀏覽:978

How to Create a Specific Version of an Angular Project without Installing Angular CLI

您是否使用 Angular 並需要使用不同的 Angular 版本設定項目?這是為特定版本建立 Angular 專案的簡單指南,無論是否使用 Angular CLI!

為什麼要使用特定的 Angular 版本?

在處理多個 Angular 專案時,有時您需要鎖定特定版本。也許您的專案依賴於僅在特定版本中可用的某些功能,或者可能需要與遺留程式碼庫相容。

以下是如何建立具有特定 Angular 版本的專案 - 無論您是否使用 CLI!


1. 創建 Angular 專案無需安裝 Angular CLI

您是否知道無需安裝 CLI 即可初始化特定版本的 Angular 專案?讓我們看一下語法和範例。

句法

npm init @angular@

替換為您想要的 Angular 版本,將 替換為您的專案名稱。例如,如果您想建立一個名為 SampleApp 的 Angular 16 項目,您可以執行:

例子

npm init @angular@16 sampleApp

此方法設定了一個基本的 Angular 項目,無需全域安裝 Angular CLI。如果您想避免安裝額外的工具或在受限的環境中工作,它會很方便。

其他例子

  • 名為legacyApp的Angular 13專案:

    npm init @angular@13 legacyApp
    

此指令直接拉取必要的 Angular 版本,設定特定於此版本的專案結構和相依性。


2. 使用 Angular CLI 建立 Angular 專案的特定版本

如果您喜歡使用 Angular CLI,您仍然可以為特定版本建立項目,而無需永久安裝 CLI。使用 npx 直接執行 CLI,指定您的版本。

句法

npx -p @angular/cli@ ng new
npx -p @angular/cli@ ng new 
此指令使用 npx 暫時執行指定的 CLI 版本,建立適合該 Angular 版本的專案。

例子

npx -p @angular/cli@13 ng 新 demoApp
npx -p @angular/cli@ ng new 
此指令使用 Angular CLI 版本 13 建立新項目,即使您全域安裝了不同的 Angular CLI 版本。

使用 npx 的優點:

  • 無永久安裝:一次性下載指定的CLI版本,節省空間並避免潛在的版本衝突。
  • 輕鬆切換版本:您可以在不同專案的版本之間快速切換,而無需管理多個全域 CLI 安裝。

何時選擇 CLI 與非 CLI 方法

沒有 CLI

    當您想要最少的設定時
  • 在沒有全域 Angular CLI 安裝的受限環境中工作時
使用 CLI

    當您需要利用 CLI 指令和原理圖
  • 設定全功能 Angular 工作區時

總結

無論您選擇使用或不使用 CLI,Angular 借助 npm init 和 npx 的靈活性都可以讓您輕鬆管理不同版本的專案。因此,下次您需要啟動特定的 Angular 版本專案時,您將確切地知道如何執行此操作,而無需為 CLI 安裝而煩惱!

快速命令回顧

角度版本沒有 CLI使用 CLI16npm init @angular@16 SampleAppnpx -p @angular/cli@16 ng 新範例應用程式13npm init @angular@13 LegacyAppnpx -p @angular/cli@13 ng 新 demoApp

就是這樣!希望您發現本指南對您的 Angular 專案有所幫助。如果您對使用特定 Angular 版本有任何疑問或技巧,請在下面發表評論。

編碼愉快!

版本聲明 本文轉載於:https://dev.to/itsshaikhaj/how-to-create-a-specific-version-of-an-angular-project-without-installing-angular-cli-3do0?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 建立 JS 函數以刪除給定字串中的空格。 (使用核心js而不是內建的修剪功能。)
    建立 JS 函數以刪除給定字串中的空格。 (使用核心js而不是內建的修剪功能。)
    const trim = (string) => { let strArr = string.split(""); let trimedStr = []; strArr.forEach((item) => { if (item !== " ") { ...
    程式設計 發佈於2024-11-07
  • GlobalErrorHandler:捕捉從 ErrorBoundary 手中落下的錯誤!
    GlobalErrorHandler:捕捉從 ErrorBoundary 手中落下的錯誤!
    ErrorBoundary 是一個出色的工具,可以捕捉 React 元件拋出的錯誤。您可以根據錯誤本身的性質和位置提供自訂錯誤訊息。但並非所有拋出的錯誤都由 ErrorBoundary 處理!你用這些做什麼? 當考慮非同步錯誤和從 React 外部拋出的錯誤時,ErrorBoundary 不夠。為...
    程式設計 發佈於2024-11-07
  • 如何在Visual Studio 2008中設定可執行檔圖示?
    如何在Visual Studio 2008中設定可執行檔圖示?
    在Visual Studio 2008 中設定可執行檔圖示雖然提供的參考主要針對Visual Studio 2010,但在Visual Studio 中設定可執行檔圖示的原則Studio 2008 基本上都適用。但是,需要記住一些具體的注意事項:使用.ico 檔案您必須為可執行圖示使用.ico 檔案...
    程式設計 發佈於2024-11-07
  • 導入大型 SQL 檔案:為什麼要使用 MySQL 控制台而不是 phpMyAdmin?
    導入大型 SQL 檔案:為什麼要使用 MySQL 控制台而不是 phpMyAdmin?
    在 phpMyAdmin 中匯入大型 SQL 檔案:另一種方法嘗試直接透過 phpMyAdmin 匯入大量 SQL 檔案可能會遇到限制。不過,有一個可靠的替代方法,就是利用 MySQL 控制台。 根據提供的建議,透​​過 MySQL 控制台匯入 SQL 檔案可以繞過 phpMyAdmin 中遇到的問...
    程式設計 發佈於2024-11-07
  • 使用 JSON-LD 提升部落格的 SEO:我如何使用結構化資料添加豐富的結果
    使用 JSON-LD 提升部落格的 SEO:我如何使用結構化資料添加豐富的結果
    Introduction A few years ago in 2022, I attended SCaLE 19x. For those who are not aware, SCaLE is an acronym which stands for Southern Califo...
    程式設計 發佈於2024-11-07
  • create-next-app 使用此套件驗證您的應用程式名稱
    create-next-app 使用此套件驗證您的應用程式名稱
    在本文中,我們分析 create-next-app 如何驗證您的專案名稱。 validate: (name) => { const validation = validateNpmName(basename(resolve(name))) if (validation.valid) { ...
    程式設計 發佈於2024-11-07
  • 幕後反應:到底發生了什麼事?
    幕後反應:到底發生了什麼事?
    React 長期以來一直是首選的 JavaScript 函式庫,並且很容易成為世界上最受歡迎的函式庫之一。此外,隨著 Next.js 和 Remix 等流行框架建立在 React 之上,以及使用 React-Native 進行行動開發的能力,這個函式庫不會很快消失。然而,這樣做的問題是,大多數初學者...
    程式設計 發佈於2024-11-07
  • 使用 Tinder Unblur 個人資料
    使用 Tinder Unblur 個人資料
    Tinder 取消模糊程式碼說明 以下 JavaScript 程式碼是一個腳本,旨在對「喜歡你」部分中的 Tinder 照片進行取消模糊處理。它的工作原理是從 Tinder 的 API 獲取預告圖像並動態更新 DOM 以用清晰的圖像替換模糊的圖像。 async function ...
    程式設計 發佈於2024-11-07
  • 如何確保網站安全:最佳實踐和見解
    如何確保網站安全:最佳實踐和見解
    在當今的數位時代,確保網站的安全至關重要。隨著網路威脅變得越來越複雜,保護您的網站免受潛在漏洞的影響至關重要。以下是增強網站安全性的一些關鍵做法,以及特定網站 HouseOfParty.com 如何在其利基市場中舉例說明安全做法。 使用 HTTPS 描述:HTTPS(安全超文本傳輸協定)會對使用者...
    程式設計 發佈於2024-11-07
  • 如何使用「adjustText」函式庫解決 matplotlib 圖中註解重疊的問題?
    如何使用「adjustText」函式庫解決 matplotlib 圖中註解重疊的問題?
    Matplotlib 中的重疊註釋:綜合解決方案在資料視覺化領域,經常會遇到重疊註釋的問題,其中文字標籤彼此模糊,導致難以解釋圖表。為了應對這項挑戰,人們提出了各種方法,但對於像線重疊的複雜圖形,找到合適的解決方案可能很困難。這篇文章提出了一個使用「adjustText」函式庫的全面解決方案,提供了...
    程式設計 發佈於2024-11-07
  • 如何使用 GORM 檢索列總計?
    如何使用 GORM 檢索列總計?
    使用GORM 檢索列總計在GORM 中,透過幾個簡單的步驟即可實現從資料庫表中取得列的總和.首先,定義一個結構體來表示要檢索的資料。在這種情況下,如果您只需要工資總和,您可以建立一個帶有整數欄位的簡單結構體:type SalarySum struct { Sum float64 }接下來,使...
    程式設計 發佈於2024-11-07
  • 如何存取名稱中帶有空格的類別屬性?
    如何存取名稱中帶有空格的類別屬性?
    存取類別物件中帶有空格的屬性本問題探討如何存取名稱中包含空格的類別屬性。考慮以下範例,其中stdClass 物件具有名為「[Sector]」和「[Date Found]」的屬性:<p>stdClass Object ([Sector] =&gt; Manufacturing [D...
    程式設計 發佈於2024-11-07
  • Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta:列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而,隨著 Beta 2 的後續發布,這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    程式設計 發佈於2024-11-07
  • 如何在 C++ 中正確釋放透過 Placement New 分配的記憶體?
    如何在 C++ 中正確釋放透過 Placement New 分配的記憶體?
    placement new 和delete 難題placement new 和delete 難題在C 中,當使用placement new 運算子分配記憶體時,會出現關於取消分配的適當方法的困境那個記憶。讓我們探討兩個可能的解決方案:const char* charString = "He...
    程式設計 發佈於2024-11-07
  • 單元測試:綜合指南
    單元測試:綜合指南
    单元测试是软件开发的基本实践之一,确保系统的各个单元或组件按预期运行。这些测试隔离小段代码,例如函数或方法,并验证它们在给定特定输入的情况下是否产生正确的输出。本文将深入概述单元测试、其优点、最佳实践和局限性。 什么是单元测试? 单元测试是一种软件测试技术,其中程序的各个单元(最小的可测试部分)被...
    程式設計 發佈於2024-11-07

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

Copyright© 2022 湘ICP备2022001581号-3