---
# System prepended metadata

title: '[紀錄] 升級 angular 18'

---

:::info
* https://angular.dev/reference/versions
* https://angular.dev/update-guide
:::


* `npm install  --legacy-peer-deps` 解決套件相依性問題
* `ng run build:lib`
* `ng run build:packed:lib`

以下皆為 node 18

### ⬆ v15
* 執行 `npm install typescript@4.8.4 ng-packagr@15.2.2 zone.js@0.12.0 primeng@15.4.1 primeicons@5.0.0 ngx-watermark@14.0.0 --legacy-peer-deps`
* 執行 `ng update @angular/core@15 @angular/cli@15`
* 執行 `ng update @angular/cdk@15`

### ⬆ v16
* 執行 `npm install typescript@4.9.3 ng-packagr@16.1.0 zone.js@0.13.0 primeng@16.5.1 primeicons@5.0.0 ngx-watermark@16.0.0 --legacy-peer-deps`
* 執行 `ng update @angular/core@16 @angular/cli@16`
* * 執行 `ng update @angular/cdk@16`

### ⬆ v17
* 執行 `npm install typescript@5.3.3 ng-packagr@17.0.0 zone.js@0.14.10 primeng@17.12.0 --legacy-peer-deps`
* 執行 `ng update @angular/core@17 @angular/cli@17`
* 執行 `ng update @angular/cdk@17`

:::info
npm install --force or --legacy-peer-deps
=> ngx-watermark 不支援 angular17 以上
:::

> ❕ 調整升級後元件樣式不同
> * cub-sidebar-menu 樣式不同
>     * p-panelmenu-header-link 改為 p-panelmenu-header-action
> * Accordion icon 
> * Tables header icon 
> * Tab
> * Dropdown with Clear icon

### ⬆ v18
* 執行 `npm install typescript@5.5.4 ng-packagr@18.2.1  --legacy-peer-deps`
* 執行 `ng update @angular/core@18 @angular/cli@18`
    > 自動遷移到 new build system 
    > https://angular.dev/tools/cli/build-system-migratio

* 執行 `ng update @angular/cdk@18`
### ⬆ primeng 18
:::info
https://primeng.org/guides/migration
:::
* 執行 `npm install primeng@18.0.0`
* p-calendar -> p-datepicker
* p-dropdown  -> p-select 
* p-overlayPanel -> p-popover


使用 git bash 執行 
### packed-into-tgz 在 windows 執行
```bat
//scripts/packed-into-tgz.bat
@echo off
echo Packed into tgz.
cd ./dist/cubipe-lib-view-primeng
call npm pack

echo Copying cubipe-lib-view-primeng.tgz.
cd ../../
copy .\dist\cubipe-lib-view-primeng\cubipe-lib-view-primeng-*.tgz .
cd ./dist/cubipe-lib-view-primeng
del cubipe-lib-view-primeng-*.tgz
```



