angular版本更新與配置檔案問題

李國穩發表於2022-01-03
Angular

本週寫日誌系統，需要我們自己初始化一個angular專案，在初始化過程中遇到很多問題

問題

版本問題

因為初始化時angular版本問題導致無法使用單元測試，然後嘗試自己初始化一個angular專案，在初始化過程中遇到一些問題。
首先是我初始化的的時候因為我電腦上裝的Angular-cli的版本是教程的版本11.0.7 這個版本單元測試雖然沒有問題，但是在使用團隊一些庫的時候出現問題，因為智慧社群的版本是12.1.2，而教程的版本比較舊，有一些庫在引入時會有問題。

解決辦法

最開始想到的是有沒有直接就可以對當前專案升級的方法，經過Google後，發現可以執行ng update 進行升級，但是那個部落格寫的不太清楚，我執行後發現沒什麼效果，但是在部落格中發現這樣一句話

然後嘗試直接修改package中所有@angular的版本號，然後不報錯，這種做法雖然感覺不太靠譜，但是能用。package.json 的 devDependencies 區列出的這些包可以幫助你在本機開發應用
之後就沒有再管這個東西，但在寫部落格時又在官方文件中發現一個非常有用的工具
angular更新指南

這個工具會告訴你如何進行更新
ng update
通過執行以下命令，對核心框架和 CLI 的當前穩定版本執行基本更新

ng update @angular/cli @angular/core

要從一個主要版本更新到另一個，請使用以下格式

ng update @angular/cli@^<major_version> @angular/core@^<major_version>

我們建議你始終更新到最新的補丁版本，因為它包含我們自最初的主版本以來發布的修復程式。例如，使用以下命令獲取最新的 10.xx 版本並使用該版本進行更新。

ng update @angular/cli@^10 @angular/core@^10

總結

對於一個剛開始的專案最好的更新方法就是直接刪了，切換angular-cli的版本，然後直接新建，如果時已經寫了很多的則需要用上面提到的工具，根據給出的方法更新

angular 配置檔案

一個angular 檔案初始化時有如下檔案

├── README.md         專案介紹檔案，後期我們可以變更為對當前專案的介紹，比如專案完成了什麼功能，在開發時需要什麼
├── angular.json       Angular專案的配置檔案
├── e2e                專門放整合測試檔案的資料夾 
├── karma.conf.js      Karma對應的配置檔案
├── node_modules       本專案依賴的其它npm包
├── package-lock.json  本專案依賴於其它包（庫）的具體安裝情況（版本、下載地址等）
├── package.json       本專案依賴於其它包（庫）的情況
├── src                原始碼資料夾
├── tsconfig.app.json  typescript相關的配置檔案
├── tsconfig.json      typescript相關的配置檔案
├── tsconfig.spec.json typescript測試相關的配置檔案
└── tslint.json        語法校驗配置檔案

智慧社群主要修改的只有

TypeScript 配置

TypeScript 是 Angular 應用開發中使用的主語言。 它是 JavaScript 的“方言”之一，為型別安全和工具化而做了設計期支援。
瀏覽器不能直接執行 TypeScript。它得先用 tsc 編譯器轉譯(transpile)成 JavaScript，而且編譯器需要進行一些配置。
官方文件連結

package-lock.json

無論使用 npm 還是 yarn 安裝的包，都會記錄在
package.json檔案中。
CLI 的 ng new 命令會在建立新的工作區的同時建立一個 package.json。 這個 package.json 用於此工作區中的所有專案，包括由 CLI 在建立工作區時建立的那個初始專案。
最初，這個 package.json 包括一組初始包，其中有些是 Angular 自身需要的，另一些是用來支援一些常見的應用場景。 隨著應用的演化，你可能會往 package.json 中新增甚至移除一些包。
package.json 檔案中的包被分成了兩組：
dependencies 是執行應用的基礎，包括
Angular 包：Angular 的核心和可選模組，它們的包名以 @angular/ 開頭。
支援包：那些 Angular 應用執行時必需的第三方庫。
膩子指令碼：膩子指令碼負責抹平不同瀏覽器的 JavaScript 實現之間的差異。
devDependencies 只有在開發應用時才會用到。

tslint.json

利用 npm 安裝的 TypeScript 語法檢查器 (linter) 檢測 TypeScript 程式碼並在你違反它的規則時提示你。
這個檔案在智慧社群中並沒有
在有這個檔案的時候很多常用的語法都會報錯。

總結

以前都是老師建好了專案，我們直接寫元件，現在要我們自己從頭開始一個專案，在最開始的時候會遇到很多問題，當然也理解了很多基本的東西

相關文章