專案Cli版本與自身版本不一致,使用npm start 會有問題

想針對angular-cli 新舊版本的問題問各位前輩,之前有看其他文章,把原本的ng serve 改用npm start ,透過 npm start 會用專案內 node_modues 裡面的 Angular CLI 啟動開發伺服器。但還是會出現這個錯誤(圖三),主要原因是因為,我們當時的專案開發者他的CLI版本是舊版,其中新版本從原先的tsconfig.json更改成 tsconfig.app.json,上網找了許多方法,但都沒辦法解決。我也試著把檔名更改成tsconfig.app.json好了,會變成整個專案有很多的錯誤,如下(圖二),望各位前輩能為小弟解答,或是說有什麼更好的辦法可以讓最新版的cli去執行舊專案。
再付上一次我的cli版本(圖一)。

為什麼不將cli的版本升級上來?
新版CLI在效能上也有提升

1個讚

謝謝@kevin您的回答,
但現在我手邊的這個專案,是一個已開發的專案 版本是很早以前的0.28專案
那我該如何直接提升版本的專案呢?
因為我現在自己的版本專案是 1.2
其他團隊同仁有些是1.2 有些是0.x版本
這樣是不是代表說 一般在開發上
我們所有人同仁 包括專案的版本 都應該先升級至最新版嗎?

是的,在團隊開發時要注意的第一個條件,就是每個人的版本是否都一致。

  1. 如果你們是使用 npm 5.0 的話,要注意 package.lock 的檔案,因為這個檔案會鎖住 npm install 時的安裝版本,要更新 package 的版本,需使用 npm update 的指令,這樣子就會更新至最新版並同時更新 package.lock 的內容
  2. CLI跟Framework 更新至最新版的好處是,新版提供的新功能,Bug fix, 效能改善,這些都會幫助專案的開發。
  3. Framework 的版本更新,要留意的是 break change 或是所引用的第三方套件的問題,這個問題在非Angular的框架比較容易看到。
  4. CLI 這類型的工具 (不限定 Angular CLI) 通常都會更新至最新版。

@Kevin 看到您的回答這邊我有這邊有一些問題滿好奇的

就是關於在團隊開發上,向您所說的在一開始開發的時候就會先要求版本一致
目的是為了讓建立出來的新專案可以讓大家都能開發或是測試

可是這邊有一個小問題是,如果今天有新的後進人員也加入參與當前這個專案,此時版本不一致
在這樣的情況下是否在有新版本的時候,就會同時將當前的專案也進行升級呢? (不定時更新專案版本)否則就還是會有像樓主這樣的問題發生。

另外剛剛稍微google 一下,如果要升級當前專案的版本的時候 需要下這樣的指令:
rm -rf node_modules dist # On Windows use rmdir /s /q node_modules dist
npm install --save-dev @angular/cli@latest
npm install
ng init

這個指令感覺是在重新安裝新版本的 node_modules 不過如果像樓主的問題
新的Cli版本在 src當中,增加了taconfig.app.json這個檔案。而這檔案在舊版本是沒有的
這樣的問題僅重新安裝node_modules 貌似還是無法解。 還是說我找錯更新專案版本的指令了?

最後還有一個問題是,像以維護舊專案來說,自身版本比當前版本高,因此需要的檔案內容也不一樣,在這樣情況下即使利用 npm start 來執行也會出錯,該如何解決了

謝謝您耐心看完我的問題,也先謝謝您辛苦地回復了。

  1. ng init 已經不存在了
  2. 新版的 npm 5.0 有提供 lock 檔案,這個會被簽入到版控內, yarn 也有相同的東西,所以新進人員在安裝專案環境時,會依 lock 檔案下載。所以如果使用 npm 的人,一定要升級到 5.x 版。
  3. CLI 與 Angular 都會定期的是出新版本,所以在追蹤新版上應該不困難,由一個人做升級的動作後,然後將升級後的 lock 檔案簽入版控,之後的動作就是根據 lock 檔案做 install 即可
  4. framework升級是針對正在開發的專案適用。維護專案就是情況升級了。
  5. 已經進入維護期的專案,視情況更新,如果 npm start 真的不能跑,另開分支試著將 CLI 的環境升級 ,最快的方式是建立一個新的專案,比較兩邊的檔案架構差異,可以執行後再合併至原本的 branch 內。

這部分可以詢問 @jeffwu85182 ,問看看他是怎麼升級 cli 的

之前遇到過好幾次類似的問題
可能原因非常多
依賴庫可能會有:Node, NPM, TS, Angular, ng cli, webpack, other packages…
型態包含:設定值,特殊語法,檔案結構,版號
各種排列組合下來,需要測試的數量非常驚人!
花費時間呈倍數增加

假如已經找過 Google 無法解決問題
不妨試試看以下方式
直接用目標新版 ng cli 重建專案
逐步加入依賴庫以及逐一搬移原始碼進來
每做完一小步驟就可以測試一下
這方式好處是常數時間可以解決

2個讚