Salient Soft

I had some code which toggled the value checked by an *ngIf, to cause the *ngIf target to be created.

I then wanted, in the same component method immediately afterwards, to refer to the target (which was a ViewChild)  to set focus to it. At that point I got an undefined error, as it had not yet been created and added to the DOM.

This post here details the issue and how to get around it.

Basically, using a setTimeout and setting the focus in its callback solved the problem. The interesting part of the trick detailed in the post was that the timeout could be legitimately set to 0, as all we needed to do was put our callback function on the end of the message queue which would always ensure that Angular change detection runs before the setFocus() call. This worked fine, using the following code:-

// set the state which will trigger the *ngIf to create the focus target
this.autocompleteState = AutocompleteStates.Initial;

// now set the focus as a timeout callback
setTimeout(() => this.searchbar.setFocus(), 0);

Comments Off on Angular delay reference to *ngIf target until created

I was getting fed up with the various hacks and switches needed e.g. in Chrome to persuade it to use an ordinary self signed certificate to allow ssl for localhost during local development and testing.

My holy grail was to have seamless self signed localhost certificate support, such that the browsers would not complain at all or need any special hacks, but ‘just work’, and without any nasty warnings in the address bar. I wanted to use the same certificate in a Java Keystore for Spring Boot, as well as with a node http-server for serving webpack bundles. After much fishing around, the following solution worked for me.

Summary of Issues found/solved

1/ You can get a self signed cert to be fully trusted locally if you add it to the local computer’s Trusted Root Certification Authorities Store. For windows this is straightforward with the management console – details below in the steps.

2/ In addition, the certificate needs to have a Subject Alternative Name (SAN) defined as localhost, or Chrome will spit it out with a Common Name error. This is a misnomer – the problem is not with the Common Name, it is due to the lack of a correct SAN. Just setting the Common Name (CN) to localhost is deprecated and will no longer work in Chrome.

3/ The Java Keytool can create a keystore containing a certificate with a SAN, using the ext switch. This is detailed here for Java 7 (see the table under the -ext switch). It also works for Java 8 but I found the above docs somewhat clearer than those for java 8. However, I could not find a way to add multiple SAN DNS references, e.g. for localhost and for www.localhost.

4/ I found a way via this post here to use openssl to create a certificate keystore containing the certificate, which I could then import into a java keystore using keytool. openssl  was able to create multiple SAN DNS entries as required. My previous post here links to this post re setting up a Wamp Server, which links to this page re installing openssl.

5/ A trivial gotcha which I hit initially – once you have created and installed the certificate e.g. in the computer’s trust store as above, make sure that this certificate is also the exact one that you are using with all your web servers – in this case, http-server and Spring Boot.

6/ Once all done and working, I could happily use Chrome, IE11 and Firefox without any hacks or switches for self signed certs, and without any hacky warning on the address bar – just the normal black padlock.

Steps to Implement the Solution.

1/ I created a config file for openssl, e.g. req.cnf, as follows:

[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = GB
O = Salient Soft Ltd
CN = localhost
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
DNS.2 = www.localhost

2/ I created the certificate and key via openssl using the above config file:

openssl req -x509 -nodes -days 36500 -newkey rsa:2048 -keyout ss-localhost-cert.key -out ss-localhost-cert.crt -config req.cnf -sha256

3/ Import the certificate and key into a PKCS12 store, and then import that store into a java keystore with keytool:

openssl pkcs12 -export -name salientsoftdev -in ss-localhost-cert.crt -inkey ss-localhost-cert.key -out ss-localhost-cert-keystore.p12
keytool -importkeystore -destkeystore salientsoft.p12 -storetype PKCS12 -srckeystore ss-localhost-cert-keystore.p12 -srcstoretype pkcs12 -alias salientsoftdev

4/ Use the Microsoft Management Console to import the above certificate (ss-localhost-cert.crt) into the local computer’s Trusted Root Certification Authorities Store. This post  details how to do this on Windows 10, but Windows 7 was the same.

5/ I used the final keystore for Spring Boot (per details here), and the certificate and key files for node http-server (per details here).

Comments Off on Creating a fully trusted Self Signed localhost certificate

I needed to use ssl for a Spring Boot backend web service for Yoti, as https is a Yoti requirement.

This post here details how to do this for Spring Boot. The official Oracle docs can also be found here.

The following configuration fragment from the Spring Boot application.properties shows how to configure for ssl using the created keystore (keystore.p12), which was placed in the deployment directory alongside the spring boot jar:-

server.port=8443
server.ssl.key-store-type=PKCS12
server.ssl.key-store=salientsoft.p12
server.ssl.key-store-password=<password>
server.ssl.key-alias=salientsoftdev

Comments Off on Using self signed SSL with Spring Boot

Instructions for setting up http-server for https use may be found here.

To do this I used the same certificate/key combination (but renamed as required) that I created for setting up ssl over WAMP, in my previous post here. As with the WAMP post/installation, the certificate/key were created using openssl, which I downloaded here. The official openssl site may also be found here.

From my previous WAMP installation, I took the certificate.crt/private.key combination from the apache conf folder, and renamed them to cert.pem/key.pem respectively, and placed them in a new ‘keys’ folder conveniently accessible by the batch files that ran all the microapps. I then created ssl versions of all the batch files to run the microapps – an example of the fabric batch file follows:-

cd dist\microapp-fabric-prototype
http-server -p 443 -S -C ..\..\..\keys\ss-localhost-cert.crt -K ..\..\..\keys\ss-localhost-cert.key

https then worked fine and I was able to integrate with the live Yoti for age verification.

Comments Off on Using the node http-server over self signed ssl

From Angular 4.3 onwards, the HttpClient is preferred over the old Http service.

When creating and passing URL parameters, the new HttpParams object must be used.

Details and examples of this are shown here.

Note carefully as per the post that when passing parameters to the http methods e.g. get, the json property name is now ‘params’ instead of ‘search’, and the append method should be called to add parameters (although the last poster indicates that calling set worked for him as well).

Another gotcha is that the HttpParams object is also immutable, so that every time you add a parameter a new object is created/returned and you must use the returned object, e.g. in fluent style when adding multiple parameters, otherwise you will end up using your empty initial HttpParams object.

Comments Off on URL Parameter changes when switching to HttpClient

Note that you must now call this as a function rather than a method of another observable, see here.

Also note that as before you can use a projection function to map the results, as an alternative to using .pipe(map…)). If you are using the projection function, you should not use the spread syntax with the projection as the last argument as this is deprecated. Rather pass the observables as an array, followed by the projection function. More details on the project are here, and in the code examples here.

Comments Off on combineLatest changes when upgrading to rxjs 6

When upgrading an angular 4 project (places-admin) to angular 6, I got the above error when building.

The problem and solution are detailed here.

The issue appears to be caused by webpack 4.25.* breaking compatibility with the plugin.

Applying the fix in the above post solved the problem, by adding

“webpack”: “4.24.0”

to the devDependencies section in package.json

Comments Off on Angular build fails with “Progress Plugin Invalid Options”