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. 😱 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.
<h3>Updating to Angular 19</h3>
Upgrading your Angular application ensures that you stay up-to-date with the latest features, performance improvements, security patches, and bug fixes.
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.
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.
Because I wanted to migrate my project from version 15 to version 19, I needed to follow the guide and not just run the
<pre>ng update</pre>
command to update to the next major version(s).
<h3>Check dependencies and versions</h3>
To check my installed version of Node, I ran the command
<pre>node –version</pre>.
I’m currently at version 23.5.0.
To check my installed version of TypeScript, I ran the command
<pre>npx tsc –version</pre>.
I’m currently at version 5.4.5
To check my installed version of Angular, I ran the command
<pre>ng –version</pre>.
I’m currently at version 18.2.17.
I ran the command <pre>ng update @angular/core@16 @angular/cli@16</pre>. This brought my project up to version 16.2.12.
Next, I got the following message in the Terminal
<pre>The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 18.2.17 to perform the update.
The @angular/cli will need to be updated to at least this version to remove this warning.
</pre>
I ran the command <pre>ng update @angular/core@17 @angular/cli@17</pre> to bring my project up to version 17.
Build the project after making changes and then I pushed the build to my <a href=”https://github.com/carltonstith/portfolio”>project repo.</a>
An error occurred.
<pre>The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 18.2.17 to perform the update.
✔ Packages successfully installed.
Node.js version v23.5.0 detected.
Odd 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/.
Using package manager: npm
Collecting installed dependencies…
Found 32 dependencies.
Fetching dependency metadata from registry…
Package “@ng-bootstrap/ng-bootstrap” has an incompatible peer dependency to “@angular/localize” (requires “^16.0.0” (extended), would install “18.2.13”).
Package “@ng-bootstrap/ng-bootstrap” has an incompatible peer dependency to “@angular/common” (requires “^16.0.0” (extended), would install “18.2.13”).
Package “@ng-bootstrap/ng-bootstrap” has an incompatible peer dependency to “@angular/core” (requires “^16.0.0” (extended), would install “18.2.13”).
Package “@ng-bootstrap/ng-bootstrap” has an incompatible peer dependency to “@angular/forms” (requires “^16.0.0” (extended), would install “18.2.13”).
✖ Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the ‘–force’ option to ignore incompatible peer dependencies and instead address these warnings later.
See “/private/var/folders/q2/2jf_0xr519l5v69vcsfjsd900000gn/T/ng-6buP2L/angular-errors.log” for further details.</pre>
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.
The build was created successfully but I noticed the following warning in the VS terminal.
<pre>▲ [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.</pre>
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.
Check the installed version of Angular by running
<pre>ng –version</pre>
Now I’m at version 18.2.13
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.
<q>Version 19, here we come!</q>
I next ran the command <pre>ng update @angular/core@19 @angular/cli@19</pre> to bring my project up to v19.
As expected, this is the output in the terminal
<pre>The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 19.2.6 to perform the update.
Node.js version v23.5.0 detected.
Odd 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/.
Using package manager: npm
Collecting installed dependencies…
Found 32 dependencies.
Fetching dependency metadata from registry…
Package “@ng-bootstrap/ng-bootstrap” has an incompatible peer dependency to “@angular/localize” (requires “^17.0.0” (extended), would install “19.2.5”).
Package “@ng-bootstrap/ng-bootstrap” has an incompatible peer dependency to “@angular/common” (requires “^17.0.0” (extended), would install “19.2.5”).
Package “@ng-bootstrap/ng-bootstrap” has an incompatible peer dependency to “@angular/core” (requires “^17.0.0” (extended), would install “19.2.5”).
Package “@ng-bootstrap/ng-bootstrap” has an incompatible peer dependency to “@angular/forms” (requires “^17.0.0” (extended), would install “19.2.5”).
✖ Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the ‘–force’ option to ignore incompatible peer dependencies and instead address these warnings later.
See “/private/var/folders/q2/2jf_0xr519l5v69vcsfjsd900000gn/T/ng-cNG1QP/angular-errors.log” for further details.</pre>
This code is basically saying that I need to uninstall ng-bootstrap, update the project, then add the compatible version of ng-bootstrap.
<h3>Uninstalling @ng-bootstrap/ng-bootstrap</h3>
<pre>npm uninstall @ng-bootstrap/ng-bootstrap</pre>. After this command, I pushed the code to my repo.
<h3>Updating to Angular 19</h3>
<pre>npm run ng update @angular/core@19 @angular/cli@19</pre>
After the preceding command, this is what I saw in the Terminal
<pre>ng update @angular/core@19 @angular/cli@19 ─╯
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 19.2.6 to perform the update.
Node.js version v23.5.0 detected.
Odd 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/.
Using package manager: npm
Collecting installed dependencies…
Found 31 dependencies.
Fetching dependency metadata from registry…
Updating package.json with dependency @angular-devkit/build-angular @ “19.2.6” (was “18.2.17”)…
Updating package.json with dependency @angular/cli @ “19.2.6” (was “18.2.17”)…
Updating package.json with dependency @angular/compiler-cli @ “19.2.5” (was “18.2.13”)…
Updating package.json with dependency @angular/localize @ “19.2.5” (was “18.2.13”)…
Updating package.json with dependency typescript @ “5.8.2” (was “5.4.5”)…
Updating package.json with dependency @angular/animations @ “19.2.5” (was “18.2.13”)…
Updating package.json with dependency @angular/common @ “19.2.5” (was “18.2.13”)…
Updating package.json with dependency @angular/compiler @ “19.2.5” (was “18.2.13”)…
Updating package.json with dependency @angular/core @ “19.2.5” (was “18.2.13”)…
Updating package.json with dependency @angular/forms @ “19.2.5” (was “18.2.13”)…
Updating package.json with dependency @angular/platform-browser @ “19.2.5” (was “18.2.13”)…
Updating package.json with dependency @angular/platform-browser-dynamic @ “19.2.5” (was “18.2.13”)…
Updating package.json with dependency @angular/router @ “19.2.5” (was “18.2.13”)…
Updating package.json with dependency zone.js @ “0.15.0” (was “0.14.10”)…
UPDATE package.json (1300 bytes)
✔ Cleaning node modules directory
✔ Installing packages
** Executing migrations of package ‘@angular/cli’ **
❯ Update ‘@angular/ssr’ import paths to use the new ‘/node’ entry point when ‘CommonEngine’ is detected.
Migration completed (No changes made).
❯ Update the workspace configuration by replacing deprecated options in ‘angular.json’ for compatibility with the latest Angular CLI changes.
Migration completed (No changes made).
** Optional migrations of package ‘@angular/cli’ **
This package has 1 optional migration that can be executed.
Optional migrations may be skipped and executed after the update process, if preferred.
Select the migrations that you’d like to run [use-application-builder] Migrate application projects to
the new build system. (https://angular.dev/tools/cli/build-system-migration)
❯ Migrate application projects to the new build system.
Application 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.
You can read more about this, including known issues and limitations, here: https://angular.dev/tools/cli/build-system-migration
UPDATE tsconfig.json (944 bytes)
Migration completed (1 file modified).
** Executing migrations of package ‘@angular/core’ **
❯ Updates non-standalone Directives, Component and Pipes to ‘standalone:false’ and removes ‘standalone:true’ from those who are standalone.
UPDATE src/app/components/home/home.component.ts (1695 bytes)
UPDATE src/app/components/about/about.component.ts (1854 bytes)
UPDATE src/app/components/projects/projects.component.ts (1449 bytes)
UPDATE src/app/components/experience/experience.component.ts (6376 bytes)
UPDATE src/app/components/not-found/not-found.component.ts (532 bytes)
UPDATE src/app/layouts/resume-layout/resume-layout.component.ts (258 bytes)
UPDATE src/app/components/blog/blog.component.ts (223 bytes)
UPDATE src/app/app.component.ts (233 bytes)
UPDATE src/app/components/footer/footer.component.ts (495 bytes)
UPDATE src/app/components/navbar/navbar.component.ts (342 bytes)
UPDATE src/app/components/resume-navbar/resume-navbar.component.ts (258 bytes)
UPDATE src/app/components/contact/contact.component.ts (235 bytes)
UPDATE src/app/layouts/default-layout/default-layout.component.ts (262 bytes)
Migration completed (13 files modified).
❯ Updates ExperimentalPendingTasks to PendingTasks.
Migration completed (No changes made).
** Optional migrations of package ‘@angular/core’ **
This package has 1 optional migration that can be executed.
Optional migrations may be skipped and executed after the update process, if preferred.
Select the migrations that you’d like to run</pre>
<h3>Reinstalling a version of ng-bootstrap compatible with Angular 19.<h3>
<pre>ng add @ng-bootstrap/ng-bootstrap</pre>
After the preceding command, this is what I saw in the Terminal
<pre>
✔ Determining Package Manager
› Using package manager: npm
✔ Searching for compatible package version
› Found compatible package version: @ng-bootstrap/ng-bootstrap@18.0.0.
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package
UPDATE package.json (1344 bytes)
✔ Packages installed successfully.
Cannot find module ‘@angular-devkit/core’
Require stack:
– /Users/carltonstith/Documents/code/portfolio/node_modules/@ng-bootstrap/ng-bootstrap/schematics/ng-add/setup-project.js
– /Users/carltonstith/Documents/code/portfolio/node_modules/@angular-devkit/schematics/tools/export-ref.js
– /Users/carltonstith/Documents/code/portfolio/node_modules/@angular-devkit/schematics/tools/index.js
– /Users/carltonstith/Documents/code/portfolio/node_modules/@angular/cli/src/commands/add/cli.js
– /Users/carltonstith/Documents/code/portfolio/node_modules/@angular/cli/src/commands/command-config.js
– /Users/carltonstith/Documents/code/portfolio/node_modules/@angular/cli/src/command-builder/command-runner.js
– /Users/carltonstith/Documents/code/portfolio/node_modules/@angular/cli/lib/cli/index.js
– /usr/local/lib/node_modules/@angular/cli/lib/init.js
– /usr/local/lib/node_modules/@angular/cli/bin/ng
</pre>
Paying particular attention to the line, <pre>Cannot find module ‘@angular-devkit/core’
Require stack:</pre>
I resolved the error by running this command <pre>npm install –save-dev @angular/cli@latest</pre>
I next ran <pre>ng serve</pre> to build and check the application to make sure nothing broke.
Create an inventory of all components, directives and pipes as these are now standalone by default.
Updating to the latest version of Angular automatically updated my components with
<pre>
@Component({
standalone: false,
…
})
</pre>
<h3>Upgrade to TypeScript version 5.5 or later.<h3>
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.
<pre>npm install typescript –save-dev</pre>
After running this command, I checked to make sure my version of TS was updated by running the command
<pre>npx tsc –version
Version 5.8.2</pre>
That’s all for now. Thanks for reading.
