First things first…<\/p>\n
I have a confession to make and it’s pretty scary. Ready for it?<\/p>\n
I haven’t updated my portfolio in quite some time. \ud83d\ude31 My last commit was in September 2024 and the project remained at Angular version 15 up until just recently. It’s not that I didn’t care, I just got busy with life.<\/p>\n
<h3>Updating to Angular 19<\/h3><\/p>\n
Upgrading your Angular application ensures that you stay up-to-date with the latest features, performance improvements, security patches, and bug fixes.<\/p>\n
Since my last Angular project update (I was using version 15.2.10), it was necessary to upgrade my Angular project to the latest and greatest version. Once that’s complete, I can move on to the design planning.<\/p>\n
The <a href=”https:\/\/github.com\/angular\/angular”>team over at Angular<\/a> created an awesome <a href=”https:\/\/angular.dev\/update-guide?v=15.0-18.0&l=1″>Update Guide<\/a> to assist with the update. It really is quite helpful as I used this list and checked off each item as I moved down the list.<\/p>\n
Because I wanted to migrate my project from version 15 to version 19, I needed to follow the guide and not just run the
\n<pre>ng update<\/pre>
\ncommand to update to the next major version(s).<\/p>\n
<h3>Check dependencies and versions<\/h3>
\nTo check my installed version of Node, I ran the command<\/p>\n
<pre>node –version<\/pre>.<\/p>\n
I’m currently at version 23.5.0.<\/p>\n
To check my installed version of TypeScript, I ran the command<\/p>\n
<pre>npx tsc –version<\/pre>.<\/p>\n
I’m currently at version 5.4.5<\/p>\n
To check my installed version of Angular, I ran the command<\/p>\n
<pre>ng –version<\/pre>.<\/p>\n
I’m currently at version 18.2.17.<\/p>\n
I ran the command <pre>ng update @angular\/core@16 @angular\/cli@16<\/pre>. This brought my project up to version 16.2.12.<\/p>\n
Next, I got the following message in the Terminal
\n<pre>The installed Angular CLI version is outdated.
\nInstalling a temporary Angular CLI versioned 18.2.17 to perform the update.
\nThe @angular\/cli will need to be updated to at least this version to remove this warning.
\n<\/pre><\/p>\n
I ran the command <pre>ng update @angular\/core@17 @angular\/cli@17<\/pre> to bring my project up to version 17.<\/p>\n
Build the project after making changes and then I pushed the build to my <a href=”https:\/\/github.com\/carltonstith\/portfolio”>project repo.<\/a><\/p>\n
An error occurred.<\/p>\n
<pre>The installed Angular CLI version is outdated.
\nInstalling a temporary Angular CLI versioned 18.2.17 to perform the update.
\n\u2714 Packages successfully installed.
\nNode.js version v23.5.0 detected.
\nOdd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https:\/\/nodejs.org\/en\/about\/previous-releases\/.
\nUsing package manager: npm
\nCollecting installed dependencies…
\nFound 32 dependencies.
\nFetching dependency metadata from registry…
\nPackage “@ng-bootstrap\/ng-bootstrap” has an incompatible peer dependency to “@angular\/localize” (requires “^16.0.0” (extended), would install “18.2.13”).
\nPackage “@ng-bootstrap\/ng-bootstrap” has an incompatible peer dependency to “@angular\/common” (requires “^16.0.0” (extended), would install “18.2.13”).
\nPackage “@ng-bootstrap\/ng-bootstrap” has an incompatible peer dependency to “@angular\/core” (requires “^16.0.0” (extended), would install “18.2.13”).
\nPackage “@ng-bootstrap\/ng-bootstrap” has an incompatible peer dependency to “@angular\/forms” (requires “^16.0.0” (extended), would install “18.2.13”).
\n\u2716 Migration failed: Incompatible peer dependencies found.
\nPeer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
\nYou can use the ‘–force’ option to ignore incompatible peer dependencies and instead address these warnings later.
\nSee “\/private\/var\/folders\/q2\/2jf_0xr519l5v69vcsfjsd900000gn\/T\/ng-6buP2L\/angular-errors.log” for further details.<\/pre><\/p>\n
This is because an incompatible version of ng-bootstrap install. I had to run the command <pre>npm uninstall @ng-bootstrap\/ng-bootstrap<\/pre>, next <pre>npm run ng update @angular\/core@18 @angular\/cli@18<\/pre>, and finally <pre>ng add @ng-bootstrap\/ng-bootstrap@16<\/pre> to resolve the error. I create a build to check my code. Next, I pushed the code to my repo and was now able to run <pre>ng update @angular\/core@18 @angular\/cli@18<\/pre> to update my project to the next version of Angular (18.2.13). Run the command <pre>ng-serve<\/pre> to build the project locally to make sure everything’s ok.<\/p>\n
The build was created successfully but I noticed the following warning in the VS terminal.<\/p>\n
<pre>\u25b2 [WARNING] Polyfill for “@angular\/localize\/init” was added automatically. [plugin angular-polyfills]<\/p>\n
In the future, this functionality will be removed. Please add this polyfill in the “polyfills” section of your “angular.json” instead.<\/pre><\/p>\n
This is a known feature and I learned more about this warning at this <a href=”https:\/\/stackoverflow.com\/a\/78636646\/3166374″>Stack Overflow post<\/a>. To remove the warning, I needed to add <pre>”@angular\/localize\/init”<\/pre> to the polyfills array in angular.json.<\/p>\n
Check the installed version of Angular by running<\/p>\n
<pre>ng –version<\/pre><\/p>\n
Now I’m at version 18.2.13<\/p>\n
I’m now finally ready for <a href=”https:\/\/www.npmjs.com\/package\/@angular\/core?activeTab=versions”>version 19 of Angular<\/a>. Hooray! But first, I need to commit and push the code to its repo.<\/p>\n
<q>Version 19, here we come!<\/q><\/p>\n
I next ran the command <pre>ng update @angular\/core@19 @angular\/cli@19<\/pre> to bring my project up to v19.<\/p>\n
As expected, this is the output in the terminal<\/p>\n
<pre>The installed Angular CLI version is outdated.
\nInstalling a temporary Angular CLI versioned 19.2.6 to perform the update.
\nNode.js version v23.5.0 detected.
\nOdd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https:\/\/nodejs.org\/en\/about\/previous-releases\/.
\nUsing package manager: npm
\nCollecting installed dependencies…
\nFound 32 dependencies.
\nFetching dependency metadata from registry…
\nPackage “@ng-bootstrap\/ng-bootstrap” has an incompatible peer dependency to “@angular\/localize” (requires “^17.0.0” (extended), would install “19.2.5”).
\nPackage “@ng-bootstrap\/ng-bootstrap” has an incompatible peer dependency to “@angular\/common” (requires “^17.0.0” (extended), would install “19.2.5”).
\nPackage “@ng-bootstrap\/ng-bootstrap” has an incompatible peer dependency to “@angular\/core” (requires “^17.0.0” (extended), would install “19.2.5”).
\nPackage “@ng-bootstrap\/ng-bootstrap” has an incompatible peer dependency to “@angular\/forms” (requires “^17.0.0” (extended), would install “19.2.5”).
\n\u2716 Migration failed: Incompatible peer dependencies found.
\nPeer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
\nYou can use the ‘–force’ option to ignore incompatible peer dependencies and instead address these warnings later.
\nSee “\/private\/var\/folders\/q2\/2jf_0xr519l5v69vcsfjsd900000gn\/T\/ng-cNG1QP\/angular-errors.log” for further details.<\/pre><\/p>\n
This code is basically saying that I need to uninstall ng-bootstrap, update the project, then add the compatible version of ng-bootstrap.<\/p>\n
<h3>Uninstalling @ng-bootstrap\/ng-bootstrap<\/h3><\/p>\n
<pre>npm uninstall @ng-bootstrap\/ng-bootstrap<\/pre>. After this command, I pushed the code to my repo.<\/p>\n
<h3>Updating to Angular 19<\/h3><\/p>\n
<pre>npm run ng update @angular\/core@19 @angular\/cli@19<\/pre><\/p>\n
After the preceding command, this is what I saw in the Terminal<\/p>\n
<pre>ng update @angular\/core@19 @angular\/cli@19 \u2500\u256f
\nThe installed Angular CLI version is outdated.
\nInstalling a temporary Angular CLI versioned 19.2.6 to perform the update.
\nNode.js version v23.5.0 detected.
\nOdd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https:\/\/nodejs.org\/en\/about\/previous-releases\/.
\nUsing package manager: npm
\nCollecting installed dependencies…
\nFound 31 dependencies.
\nFetching dependency metadata from registry…
\nUpdating package.json with dependency @angular-devkit\/build-angular @ “19.2.6” (was “18.2.17”)…
\nUpdating package.json with dependency @angular\/cli @ “19.2.6” (was “18.2.17”)…
\nUpdating package.json with dependency @angular\/compiler-cli @ “19.2.5” (was “18.2.13”)…
\nUpdating package.json with dependency @angular\/localize @ “19.2.5” (was “18.2.13”)…
\nUpdating package.json with dependency typescript @ “5.8.2” (was “5.4.5”)…
\nUpdating package.json with dependency @angular\/animations @ “19.2.5” (was “18.2.13”)…
\nUpdating package.json with dependency @angular\/common @ “19.2.5” (was “18.2.13”)…
\nUpdating package.json with dependency @angular\/compiler @ “19.2.5” (was “18.2.13”)…
\nUpdating package.json with dependency @angular\/core @ “19.2.5” (was “18.2.13”)…
\nUpdating package.json with dependency @angular\/forms @ “19.2.5” (was “18.2.13”)…
\nUpdating package.json with dependency @angular\/platform-browser @ “19.2.5” (was “18.2.13”)…
\nUpdating package.json with dependency @angular\/platform-browser-dynamic @ “19.2.5” (was “18.2.13”)…
\nUpdating package.json with dependency @angular\/router @ “19.2.5” (was “18.2.13”)…
\nUpdating package.json with dependency zone.js @ “0.15.0” (was “0.14.10”)…
\nUPDATE package.json (1300 bytes)
\n\u2714 Cleaning node modules directory
\n\u2714 Installing packages
\n** Executing migrations of package ‘@angular\/cli’ **<\/p>\n
\u276f Update ‘@angular\/ssr’ import paths to use the new ‘\/node’ entry point when ‘CommonEngine’ is detected.
\nMigration completed (No changes made).<\/p>\n
\u276f Update the workspace configuration by replacing deprecated options in ‘angular.json’ for compatibility with the latest Angular CLI changes.
\nMigration completed (No changes made).<\/p>\n
** Optional migrations of package ‘@angular\/cli’ **<\/p>\n
This package has 1 optional migration that can be executed.
\nOptional migrations may be skipped and executed after the update process, if preferred.<\/p>\n
Select the migrations that you’d like to run [use-application-builder] Migrate application projects to
\nthe new build system. (https:\/\/angular.dev\/tools\/cli\/build-system-migration)<\/p>\n
\u276f Migrate application projects to the new build system.
\nApplication projects that are using the ‘@angular-devkit\/build-angular’ package’s ‘browser’ and\/or ‘browser-esbuild’ builders will be migrated to use the new ‘application’ builder.
\nYou can read more about this, including known issues and limitations, here: https:\/\/angular.dev\/tools\/cli\/build-system-migration
\nUPDATE tsconfig.json (944 bytes)
\nMigration completed (1 file modified).<\/p>\n
** Executing migrations of package ‘@angular\/core’ **<\/p>\n
\u276f Updates non-standalone Directives, Component and Pipes to ‘standalone:false’ and removes ‘standalone:true’ from those who are standalone.
\nUPDATE src\/app\/components\/home\/home.component.ts (1695 bytes)
\nUPDATE src\/app\/components\/about\/about.component.ts (1854 bytes)
\nUPDATE src\/app\/components\/projects\/projects.component.ts (1449 bytes)
\nUPDATE src\/app\/components\/experience\/experience.component.ts (6376 bytes)
\nUPDATE src\/app\/components\/not-found\/not-found.component.ts (532 bytes)
\nUPDATE src\/app\/layouts\/resume-layout\/resume-layout.component.ts (258 bytes)
\nUPDATE src\/app\/components\/blog\/blog.component.ts (223 bytes)
\nUPDATE src\/app\/app.component.ts (233 bytes)
\nUPDATE src\/app\/components\/footer\/footer.component.ts (495 bytes)
\nUPDATE src\/app\/components\/navbar\/navbar.component.ts (342 bytes)
\nUPDATE src\/app\/components\/resume-navbar\/resume-navbar.component.ts (258 bytes)
\nUPDATE src\/app\/components\/contact\/contact.component.ts (235 bytes)
\nUPDATE src\/app\/layouts\/default-layout\/default-layout.component.ts (262 bytes)
\nMigration completed (13 files modified).<\/p>\n
\u276f Updates ExperimentalPendingTasks to PendingTasks.
\nMigration completed (No changes made).<\/p>\n
** Optional migrations of package ‘@angular\/core’ **<\/p>\n
This package has 1 optional migration that can be executed.
\nOptional migrations may be skipped and executed after the update process, if preferred.<\/p>\n
Select the migrations that you’d like to run<\/pre><\/p>\n
<h3>Reinstalling a version of ng-bootstrap compatible with Angular 19.<h3><\/p>\n
<pre>ng add @ng-bootstrap\/ng-bootstrap<\/pre><\/p>\n
After the preceding command, this is what I saw in the Terminal<\/p>\n
<pre>
\n\u2714 Determining Package Manager
\n\u203a Using package manager: npm
\n\u2714 Searching for compatible package version
\n\u203a Found compatible package version: @ng-bootstrap\/ng-bootstrap@18.0.0.
\n\u2714 Loading package information from registry
\n\u2714 Confirming installation
\n\u2714 Installing package
\nUPDATE package.json (1344 bytes)
\n\u2714 Packages installed successfully.
\nCannot find module ‘@angular-devkit\/core’
\nRequire stack:
\n– \/Users\/carltonstith\/Documents\/code\/portfolio\/node_modules\/@ng-bootstrap\/ng-bootstrap\/schematics\/ng-add\/setup-project.js
\n– \/Users\/carltonstith\/Documents\/code\/portfolio\/node_modules\/@angular-devkit\/schematics\/tools\/export-ref.js
\n– \/Users\/carltonstith\/Documents\/code\/portfolio\/node_modules\/@angular-devkit\/schematics\/tools\/index.js
\n– \/Users\/carltonstith\/Documents\/code\/portfolio\/node_modules\/@angular\/cli\/src\/commands\/add\/cli.js
\n– \/Users\/carltonstith\/Documents\/code\/portfolio\/node_modules\/@angular\/cli\/src\/commands\/command-config.js
\n– \/Users\/carltonstith\/Documents\/code\/portfolio\/node_modules\/@angular\/cli\/src\/command-builder\/command-runner.js
\n– \/Users\/carltonstith\/Documents\/code\/portfolio\/node_modules\/@angular\/cli\/lib\/cli\/index.js
\n– \/usr\/local\/lib\/node_modules\/@angular\/cli\/lib\/init.js
\n– \/usr\/local\/lib\/node_modules\/@angular\/cli\/bin\/ng
\n<\/pre><\/p>\n
Paying particular attention to the line, <pre>Cannot find module ‘@angular-devkit\/core’
\nRequire stack:<\/pre><\/p>\n
I resolved the error by running this command <pre>npm install –save-dev @angular\/cli@latest<\/pre><\/p>\n
I next ran <pre>ng serve<\/pre> to build and check the application to make sure nothing broke.<\/p>\n
Create an inventory of all components, directives and pipes as these are now standalone by default.<\/p>\n
Updating to the latest version of Angular automatically updated my components with
\n<pre>
\n@Component({
\nstandalone: false,
\n…
\n})
\n<\/pre><\/p>\n
<h3>Upgrade to TypeScript version 5.5 or later.<h3><\/p>\n
Since I’m on version 5.4.5, I needed to upgrade this package. Since Angular 19 supports TypeScript 5.6, I ran this command to update it.<\/p>\n
<pre>npm install typescript –save-dev<\/pre><\/p>\n
After running this command, I checked to make sure my version of TS was updated by running the command<\/p>\n
<pre>npx tsc –version
\nVersion 5.8.2<\/pre><\/p>\n
That’s all for now. Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"
First things first… I have a confession to make and it’s pretty scary. Ready for it? I haven’t updated my portfolio in quite some time. \ud83d\ude31 My last commit was in September 2024 and the project remained at Angular version 15 up until just recently. It’s not that I didn’t care, I just got busy […]<\/p>\n","protected":false},"author":1,"featured_media":29,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7,8,9,10,6,11],"tags":[],"class_list":["post-27","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-bootstrap","category-front-end-development","category-node-js","category-programming","category-typescript"],"jetpack_featured_media_url":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-content\/uploads\/2025\/04\/angular.webp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":1,"href":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-json\/wp\/v2\/posts\/27\/revisions\/28"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-json\/wp\/v2\/media\/29"}],"wp:attachment":[{"href":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ceejaysmedia.com\/dotCeeJayS\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}