Upgrading Javascript things is always a chore.
That's why these blogposts keep appearing.
% ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 16.2.5
Node: 18.16.1
Package Manager: npm 9.7.2
OS: darwin x64
Angular: 16.2.8
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1602.5
@angular-devkit/build-angular 16.2.5
@angular-devkit/core 16.2.5
@angular-devkit/schematics 16.2.5
@angular/cli 16.2.5
@schematics/angular 16.2.5
rxjs 7.5.7
typescript 4.9.5
zone.js 0.13.1
So I've used the tool in [2] to check my dependency requirements but there's also [1] if you're interested.
Upgrading node.js
cd ~ rm nodejs tar zxvf ~/Downloads/node-v20.15.0-darwin-arm64.tar.gz ln -s node-v20.15.0-darwin-arm64 nodejs
Upgrading typescript
Upgrading typescript using "npm install -g typescript@latest".
Upgrading zone.js
I'm hoping Angular does this for me.
Upgrading Angular
For my "personal" project.
npm install -g @angular/cli@18 ng update @angular/core@17 @angular/cli@17 ng update @angular/core@18 @angular/cli@18 @ng-bootstrap/ng-bootstrap@17 ngx-cookie-service@18
For my "admin" project, the thing below only worked after upgrading cdk and material to 17.
ng update @angular/core@18 @angular/cli@18 @ng-bootstrap/ng-bootstrap@17 ngx-cookie-service@18 @angular/cdk@18 @angular/material@18
Upgrading dependencies
ng update bootstrap bootswatch material-icons
My dependencies for "personal" project
- @kolkov/angular-editor
- the editor I use in my webapps
- @ng-bootstrap/ng-bootstrap
- integration between angular and bootstrap
- @popperjs/core
- this is used for tooltips by ng-bootstrap
- bootstrap
- bootstrap, is awesome
- bootswatch
- free themes for bootstrap, I like/use "cyborg" as a darkmode theme.
- material-icons
- latest icon fonts and CSS for self-hosting material design icons.
- ngx-cookie-service
- Angular service to read, set and delete browser cookies.
ng update @angular/cdk@16 @angular/material@16 ng update @angular/cdk@17 @angular/material@17
My dependencies for "admin" project
- @angular/material
- for creating of a virtual scroller
- @angular/cdk
- for creation of a virtual scroller
- @ng-bootstrap/ng-bootstrap
- integration between angular and bootstrap
- @popperjs/core
- this is used for tooltips by ng-bootstrap
- bootstrap
- bootstrap, is awesome
- bootswatch
- free themes for bootstrap, I like/use "cyborg" as a darkmode theme.
- material-icons
- latest icon fonts and CSS for self-hosting material design icons.
- ngx-cookie-service
- Angular service to read, set and delete browser cookies.
Things I noticed
- Migrate application projects to the new build system.
- You can read more about this, including known issues and limitations, here: https://angular.dev/tools/cli/build-system-migration The output location of the browser build has been updated from "../webapp" to "../webapp/browser". You might need to adjust your deployment pipeline or, as an alternative, set outputPath.browser to "" in order to maintain the previous functionality.
- Replace deprecated HTTP related modules with provider functions.
- HttpClientModule replaced with provideHttpClient, withInterceptorsFromDi
Error messages when upgrading
Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/common" (requires "^16.0.0" (extended), would install "18.0.6").
[WARNING] Polyfill for "@angular/localize/init" was added automatically. [plugin angular-polyfills] In the future, this functionality will be removed. Please add this polyfill in the "polyfills" section of your "angular.json" instead.
I found the answer to this one in [3] on StackOverflow.
[WARNING] Unable to locate stylesheet: /assets/css/bootstrap.min.css [WARNING] Unable to locate stylesheet: /assets/css/karchan.css
Replaced this with a ThemeService (which is nice) which I found at [4].
And removed the hardcoded stylesheets in index.html. These are now added by the ThemeService.
Final result
% ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 18.0.7
Node: 20.15.0
Package Manager: npm 10.8.1
OS: darwin arm64
Angular: 18.0.6
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.7
@angular-devkit/build-angular 18.0.7
@angular-devkit/core 18.0.7
@angular-devkit/schematics 18.0.7
@angular/cli 18.0.7
@schematics/angular 18.0.7
rxjs 7.5.7
typescript 5.4.5
zone.js 0.14.7
Small note
I am using the assets to store a normal bootstrap (bootstrap.min.css) and a darkmode bootstrap (bootstrap.darkmode.min.css).
These come from respectively node_modules/bootstrap/dist/css/bootstrap.min.css and node_modules/bootswatch/dist/cyborg/bootstrap.min.css.
References
- [1] TechiDiaries - Upgrade to Angular 18
- https://www.techiediaries.com/upgrade-angular-to-v18/
- [2] Official Angular Updater Tool on the Web
- https://update.angular.io/
- [3] StackOverflow - Angular 18 Polyfills warning
- https://stackoverflow.com/questions/78636168/angular-18-polyfills-warning
- [4] Medium - Theme Switcher in Angular: From Dark to Light and Back Again
- https://medium.com/@davdifr/theme-switcher-in-angular-from-dark-to-light-and-back-again-f42fc3f9fab0
