Upgrading to Angular 18

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

Upgrading Fedora Core

There's an article [1] here. I thought I'd bookmark it, for easy reference.

Reference

[1] Fedora Magazine - Upgrading Fedora 31 to Fedora 32

https://fedoramagazine.org/upgrading-fedora-31-to-fedora-32/

New Second Hand Graphics Card

I tend to postpone upgrading my computers until it either breaks down or it gets too cramped in performance/memory/etc. This tends to take a long time.

So a colleague of mine was upgrading his computer, and I managed to get his old graphics cards.

Seeing as I am on a budget, I was looking into what the difference in performance were for second hand graphics cards.

A lot of graphics cards are replaced because there are better ones, even though the old cards still work perfectly fine.

And he just happens to buy the latest and greatest, which is still a pretty good deal after 7 years, compared to what I buy.

My original graphics card

It's a AMD Radeon HD 5700 Series.

"New" graphics card

It's a Nvidia GeForce 770.

Notes

Some notes of mine.

type

you cannot tell any more what kind of graphics card it is from just looking at the physical hardware. With any luck you can find the manufacturer, but that's it. There's just not more room or not important.

external connectors

So, no more VGA connector. And of course my old monitor only has a VGA Connector. (Don't ask, I'll write about it in the next blog about how ancient it is). It gave me an excuse to upgrade my monitor.

internal power cable for PCI Express cards

The old graphics card had only one internal power connector, a 6 pin. The new graphics card had both a 6 pin and an 8 pin. Time to look in the attic for my spare cables box.

noise

it's rather depressing that the new graphics card has three fans and is more quiet than my old graphics card which has only one fan.

heaviness

with all the fans, and the cooling fins, this new graphics card is a seriously heavy beast in pure weight. I hope my motherboard can cope with it.

plastic

instead of screws, my case has plastic easy-to-use click-and-go thingies to fasten cards. Of course, plastic is the first thing to become brittle after several years. No surprises there.

All in all, I am extremely happy. Except for a few little surprises mentioned above, I had the entire setup working relatively quickly.

References

NVidia - GeForce GTX 770

https://www.geforce.com/hardware/desktop-gpus/geforce-gtx-770/specifications

Installing MariaDB 10 on CentOS 7

I have always used the stock install of MariaDB that came with CentOS 7, but I noticed recently that it is still only on 5.5 (at the time of writing, 5.5.60).

I never had any issues with it, until I tried to upgrade my Liferay CMS system. Apparently there are definite changes that are not incorporated into the 5.5.

I wished to moved to 10.3, which is the latest stable branch, and I can apparently do that (as indicated on the mariadb website¹) by creating a MariaDB repository for DNF and then installing as usual.

Of course, first uninstall the 5.5 version.

References

[1] MariaDB - Installing MariaDB 10 on CentOS 7 / RHEL 7

https://mariadb.com/resources/blog/installing-mariadb-10-on-centos-7-rhel-7/

MariaDB - Moving to MariaDB Backup

https://mariadb.com/resources/blog/moving-to-mariadb-backup/

Angular App Upgrade

For simple Angular¹ apps, it just might make more sense to rewrite them, than to upgrade them.

This might seem easier as I haven't done anything with my Angular app lately, it's still on Angular 4 (4.0.0) and Angular 7 (7.2.0) is out by now.

Added benefit is that I see firsthand the different changes, and I can blog about it.

Let's see what has changed, and how I am going to replace certain elements.

General setup

Creating the App

Start by creating the application.

$ ng new my-app

Bootstrap

Adding bootstrap can be done using [2].

$ npm install bootstrap --save

Added the bootstrap css to the styles in angular.json.

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

I am not planning on using NgBootstrap², I think it's just a wrapper.

Material Icons

I need me some icons⁴, without getting *everything*.

$ npm install --save material-icons

Added the icons css to the styles in angular.json.

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/material-icons/iconfont/material-icons.css"
],

Miscellaneous settings

I usually make some small changes in the angular.json. These are documented here.

"outputPath": "../webapp",

Components and Services

It's possible to generate a skeleton for components and services we wish to design.

$ ng generate component errors
$ ng generate service player

JSON-typescript-mapper

I used to use the json-typescript-mapper as displayed below, as it helps to convert a incoming json response into a real live TypeScript class. It works by adding approproate @JsonProperty annotations.

I have since removed this, as I find that the new Angular has the possibility of getting a "Typed" JSON response.

Although, since at the bottom is it still JavaScript, it means I cannot have any business logic in my "JSON" TypeScript classes, as per the usual the casting of type A to type B is simply ducktyping in action.

I do run the risk of creating an anemic entity model, though.

$ npm install --save json-typescript-mapper

The Differences

This is the important part.

Angular CLI

It seems I originally built the app using CLI version 1.0.6. Now I am using 7.2.1.

Generating code

It is now possible to generate guard, interface and enum with the CLI.

angular.json

The file angular.json is new, and replacing the old .xxxx

test files moved to src directory

Test files are now in /e2e/src/app.e2e-spec.ts

creating docs

Need to remember that the old file had a way to generate docs.In scripts of the package.json

"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"typedoc": "typedoc"

Tslint and TypeScript syntax

• TsLint says: single quotes are better than double quotes.
• always use the === instead of ==, unless you're sure.
• most of the stuff I use locally should be const instead of let
• tslint actually complains sometimes if I am specific. For example with error: boolean = false;

Http

The HttpModule has been replaced/renamed to HttpClientModule and is moved from @angular/http to @angular/common/http.

Injectable annotation

has a new "providedIn" property.

REST service calls

The calling of a rest service has been simplified, from:

public updateGuild(guild: Guild): Observable<any> {
  let headers = new Headers({
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  });
  let options = new RequestOptions({ headers: headers });
  return this.http.put(this.getGuildUrl(), guild, options)
    .catch((n) => this.handleError(n));
}

To:

public updateGuild(guild: Guild): Observable<any> {
  return this.http.put(this.getGuildUrl(), guild);
}

Luckily the actual code didn't need much changing.

Build and Release

Building for production

$ ng build --prod --base-href "/karchanpersonal/"

Miscellaneous

Dates

For some reason, the dates returned by the Rest services are in a format that is not recognised by JavaScript.

2010-03-03T05:54:09Z[UTC]

The [UTC] at the end is weird.

An ugly hack that removed the [UTC] with string.replace works.

References

[1] Angular

https://angular.io/

[2] Adding Bootstrap to Angular

https://www.talkingdotnet.com/add-bootstrap-4-to-angular-6-application/

[3] NgBootstrap - Getting started

https://ng-bootstrap.github.io/#/getting-started

[4] NPM - Material Icons

https://www.npmjs.com/package/material-icons

NetBeans 8.0 - Upgrading My Source Code

I have heard that in NetBeans 8.0, which has full support for the new Java 8¹, you can have your source code transformed to make use of the latest and greatest Java 8 has to offer.

Naturally, I wish to test this. I've chosen my YPPO project for it.

Progress

It seems easy enough. Just select Source in the main menu and choose Inspect².

It transpired that I require FindBugs to use All Analyzers, but NetBeans automatically asked if I wanted to install it.

A lot of the inspection messages are regarding missing JavaDoc. I'm going to skip over those (as being not interesting).

Functional Operations

Use functional operations instead of imperative style loop.

public static void addErrorMessages(List<String> messages)
{
    for (String message : messages)
    {
        addErrorMessage(message);
    }
}

Got turned into:

public static void addErrorMessages(List<String> messages)
{
    messages.stream().forEach((message) ->
    {
        addErrorMessage(message);
    });
}

private void persistGalleries(Map<String, Gallery> galleries)
{
    for (String path : galleries.keySet())
    {
        Gallery gallery = galleries.get(path);
        logger.log(Level.FINE, "persistGalleries persist gallery {0}.", gallery);
        galleryBean.create(gallery);//em.persist(gallery);
    }
}

Got turned into:

private void persistGalleries(Map<String, Gallery> galleries)
{
    galleries.keySet().stream().map((path) -> galleries.get(path)).map((gallery) ->
    {
        logger.log(Level.FINE, "persistGalleries persist gallery {0}.", gallery);
        return gallery;
    }).forEach((gallery) ->
    {
        galleryBean.create(gallery);
    });
}

Lambda Expressions

Anonymous inner class creation can be turned into a lambda expression.

Collections.sort(list, new Comparator<Gallery>()
{
    @Override
    public int compare(Gallery t, Gallery t1)
    {
        return t.getCreationDate().compareTo(t1.getCreationDate());
    }
});

Got turned into:

Collections.sort(list, (Gallery t, Gallery t1) -> t.getCreationDate().compareTo(t1.getCreationDate()));

Notes

Despite NetBeans telling me that everything is perfectly fine, actually deploying it to GlassFish using the new Streams throws an ArrayIndexOutOfBoundsException. See [3].

I'm sure they're already hard at work.

References

[1] Overview of JDK 8 Support in NetBeans IDE

https://netbeans.org/kb/docs/java/javase-jdk8.html

[2] 7.11.21 Using Hints in Source Code Analysis and Refactoring

http://docs.oracle.com/cd/E40938_01/doc.74/e40142/build_japps.htm#NBDAG613

[3] Collection streams provoke java.lang.ArrayIndexOutOfBoundsException

https://java.net/jira/browse/GLASSFISH-21014

1Z1-805 Upgrade to Java SE 7 Programmer

Woohoo!

I have successfully completed the "1Z1-805 Upgrade to Java SE 7 Programmer" Exam, taken on the 6th of January 2012. My score was 70%. The required passing score was 60%.

Beta Exams? What's that?

No doubt you've noticed that the exam I took is called the "1Z1-805 Upgrade to Java SE 7 Programmer", while the one that can be taken at Oracle is called "1Z0-805 Upgrade to Java SE 7 Programmer".^[1] The numbers are diffferent.
It turns out that new exams have a "Beta" period.

“Beta exams are pre-production exams used by Oracle to evaluate new exam questions with the participation of a live audience.”^[2]

Taking the exam during this Beta period has the following advantages/disadvantages:

• reduced cost.
  I had to pay 25 € instead of 125 €
  
• length.
  While the exam usually takes about an hour, the Beta exam takes three hours.
• exam number.
  Beta Exam numbers begin with "1Z1"; real Exam numbers begin with "1Z0".
• number of questions.
  The number of questions are usually more than 175.
• validity.
  Both normal exams and beta exams are, when passed, perfectly valid.
• grading.
  Due to the nature of the Beta exams, grading takes a great deal more time. I had my results in on March 20 2012. In my case this translates to 2½ months waiting. ^*
• practise.
  As these new exams are regarding new software practices/technologies and the like, you might have to dig a little deeper to find out the ins and outs of the material to study. There're little to no practice exams yet, though the Oracle (Java) website has some good texts.^[3]
• limited period.
  As the Beta exam can only be taken during a specific period, there is a deadline for you to prepare. Once the official exam goes live, the Beta exam is gone.

*) update 15 april 2013 : the reason the grading takes a great deal more time, is that you are graded based on your answers on the questions that will make it to the official Production Exam. Since this exam is not available/created until 10 weeks later, it explains the delay.

References

[1] Upgrade to Java SE 7 Programmer

http://education.oracle.com/pls/web_prod-plq-dad/db_pages.getpage?lang=US&p_exam_id=1Z0_805

[2] Oracle Certification Program Beta Exams

http://education.oracle.com/pls/web_prod-plq-dad/db_pages.getpage?page_id=182&lang=US

[3] JDK 7 Adoption Guide

http://docs.oracle.com/javase/7/docs/webnotes/adoptionGuide/index.html