Update from v15 to v18
-----------------------------------
Clean cache
-----------------------------------
ng cache clean
npm cache verify
-----------------------------------
Check current outdated packages
-----------------------------------
npm outdated
==================================
Update global annular-cli:
==================================
ng version
npm i @angular-devkit/build-angular@18.1.2 --force
npm i @angular/cli@18
// not sure--------------------
Update angular-cli global:
npm uninstall -g @angular/cli
npm cache clean --force
ng version
Using following commands to re-install :
npm install -g @angular/cli
-----------------------------------
Update packages
-----------------------------------
ng update @angular/core@16 @angular/cli@16
ng update @angular/core@17 @angular/cli@17
ng update @angular/core@18 @angular/cli@18
ng update datatables.net-dt@2.1.0 tslint@5.20.1 --allow-dirty --force
ng update @angular/material@16 --allow-dirty --force
ng update @angular/material@17 --allow-dirty --force
ng update @angular/material@18 --allow-dirty --force
-----------------------------------
// Update others
ng update @types/jasmine@5.1.4 @types/node@22.0.0 jasmine-core@5.2.0 --allow-dirty --force
ng update karma@6.4.4 karma-coverage@2.2.1 karma-jasmine@5.1.0 karma-jasmine-html-reporter@2.1.0 --allow-dirty --force
ng update ngx-toastr@19.0.0 rxjs@7.8.1 typescript@5.5.4 zone.js@0.14.8 --allow-dirty --force
ng update powerbi-client-angular@3.0.5 --allow-dirty --force
ng update @coreui/angular@5.2.11 @coreui/angular-chartjs@5.2.11 @coreui/chartjs@4.0.0 @coreui/coreui@5.1.0 @coreui/icons@3.0.1 @coreui/icons-angular@5.2.11 @coreui/utils@2.0.2 --allow-dirty --force
ng update karma-jasmine-html-reporter --allow-dirty --force
----------after update--------------------------------------------------------
1. change @ to @
2. change *ngIf, *ngFor, to @if, @for
3. remove 'ngx-perfect-scrollbar'
4. change HttpClientModule to provideHttpClient
5. change scss\styles.scss
6. others
update default-layout.component.html
import { Component } from '@angular/core';
update app.module.ts
import { provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
provideHttpClient(withInterceptorsFromDi()),
add "polyfills": ["src/polyfills.ts", "@angular/localize/init"] in angular.json
Last updated