Salient Soft

I had some issues when upgrading to windows 10 – when sleeping/waking I sometimes got a blue screen error which forced an immediate reboot. I was running bios revision F18, so elected to upgrade to the latest non-beta version which was F22 at the time.

Reflashing was fine using qflash straight from the bios having placed the new bios image on a flash drive. It was also safe as the motherboard was dual bios so wouldn’t brick itself if I accidentally had a power fail whilst flashing.

However, Windows 10 would not boot after the reflash. The reflash reset all motherboard settings to default, so after some investigation I noticed that the Peripherals, SATA mode selection was set to IDE rather than AHCI, the latter being required by Windows 10 (and also used by my Windows 7 installation previously). Changing this allowed the system to safely reboot, only needing a slight repair fix by windows which took only a few seconds. All was then well. I had also tried to set the OS type to “Win 8” rather than the default of “Other”, but this was in fact a red herring – not sure what this setting does exactly (claims to allow certain Windows 8 features but does not elaborate), so in the end I just left the setting at “Other”.

This fixed the issue. 

Comments Off on Windows 10 Boot issue after Gigabyte GA-Z77-D3H reflash to F22

I experimented with mounting a backup image from a particular backup point on a job, using the Backup software.
This worked fine, and a new drive letter was created which could be browsed directly via windows explorer.
I was not clear how to dismount the image, and the documentation said that it would only remain mounted until a reboot anyway.

In fact, after rebooting, the image remained mounted in error even if the backup disk was not available (obviously it could not be fully browsed). I managed to remove it consistently by de-assigning its drive letter in disk management, then rendering it offline in disk management, and then using device manager to delete the UIM device for the mounted image, which appeared under disk devices. This worked ok providing all the steps were done in the right order, otherwise it appeared to remain around after a reboot.

After trying again in the backup software, I found it was a simple user error – the mount screen allows selection of a drive letter, and if one is already selected you can select “None” again to remove it and dismount the image. This was not immediately obvious the first time around – I failed to notice that “None” was available in the list as it was hidden and you need to explicitly scroll to the very top of the list to see it.

Once I dismounted the image this way, it worked immediately and completely removed the image and the device even without a reboot.

Comments Off on Dismounting a Paragon Backup Image

Update 27/7/22

I created a recovery disc for our Surface Pro 4, but the challenge was that it only has a single USB3 port – I needed 2 ports, one for the recovery flash drive and another for the backup drive.

I purchased a Sabrent 4 port USB3 hub which worked fine, and also a StarTech USB3 to eSATA adapter cable. These worked fine on the PC. Also, Paragon Backup would also boot fine when plugged into the hub. However, the Paragon recovery environment would not load the eSATA backup drive when it was plugged into the hub via the adapter cable. Interestingly, it would recognise it if I plugged the adapter cable directly into the USB port on the Surface Pro 4, removing the recovery disk. However, then naturally the recovery environment whinged about the lack of its recovery disk/system disk. I looked online but could not find a solution to this.

In the end I decided that in practice I was unlikely to ever need to do a bare metal restore on the Surface Pro 4. The drive is not replaceable by me and would need doing by MS as was the previous repair, and a new OS install would be done with this. It was however worth doing a full backup of the system without using the recovery disk, so that I had all the files if needed, so I did this and left matters there.

Update 25/7/22

Added a new rescan-drives.bat file plus associated diskpart-rescan-drives.txt file, to allow a rescan to be done easily in case I forget the diskpart command in future. This has been added to all the recovery discs as a convenience.

Update 22/7/22

I have now switched to using flash drives for the recovery disks – each PC has its own. Each drive was created from the Windows image rather than the ADK which simplifies things. I found that where a PC used custom eSATA drivers, I still needed to load these via mount-backup.com as with the CD ISO image, but this worked fine. The flash drives are more convenient and boot more quickly, and no CD drive is needed.

On my newer PCs with the drivers included, i.e. eSATA on the motherboard and windows drivers already present, mount-backup did not need to load drivers so I added the rescan command after the automount enable command. This allows mount-backup to be run twice if necessary, before and after turning on an eSATA drive. Sometimes I found that Paragon would do a drive scan later when powering on the drive if I had already issued a rescan in diskpart earlier directly after booting, but this was not consistent.

On the older PCs where custom drivers were loaded, I could not run mount-backup twice so did not bother with the rescan command. I could in future add a second batch file to just do the rescan, but it is easy to do in diskpart anyway, but does need remembering how to do it.

Update 23/4/22

When using a Windows 11 recovery disk for a new PC, I had not included the extra drivers or the batch file below, as the Asus motherboard already had SATA ports on it – I had just added a SATA to eSATA back plate on the PC to make the internal ports available externally. This meant that the necessary drivers were already included in windows.

When trying the recovery disk again a few weeks later, I found that when the backup drive was connected at boot time, it was visible when the recovery disk had loaded. However, the recovery disk had made a complete mess of the drive letter assignments – they were confusing and all over the place when viewed in diskpart with a list volumes command.  I was not clear how this might or might not affect backup/restore operations – it possibly would not, but it made navigating the drives and browsing manually a complete pain, so I resolved to eliminate the problem. When booting without the backup drive on, the drive letters were assigned normally. However, when turning on the backup drive, it did not load and mount. This was much like recent behaviour I had seen in Windows 11 – auto loading of eSATA drives was intermittent, and it often needed a “Scan for hardware changes” in HotSwap to load and mount the device.

I found that diskpart has a rescan command (which may well be the command called under the hood by HotSwap). When run after turning on a backup drive after booting the recovery disk, this command loaded and mounted the disk successfully, and crucially, the drive letter assignments were all sensible.

I would shortly be updating backup strategy when some new SATA backup drives arrive shortly, so at that time, I will change the recovery disk for the Windows 11 PC to also include a mount-backup.bat batch file which will just issue the rescan command in diskpart, for convenience and consistency.

Original

I installed the community version of Paragon Backup and tried to create a recovery disk (which boots and runs under Windows PE) from the settings menu.
To create an Iso that you can burn to CD requires that you install the Windows ADK before creating the recovery disk.
I had some trouble locating the correct ADK version for Windows 10 21H2 build 19044. Strangely it was not very clear from the Microsoft site but this site here helped https://www.prajwaldesai.com/windows-10-adk-versions/ and I went for the ADK for Windows 10 version 2004 and this installed and worked fine.

I also tried creating a bootable flash drive which also worked fine, and which does not need the ADK installed, but preferred to use a CD/DVD as my bootable recovery media.

The Paragon Documentation states that you can load optional drivers, either just temporarily for a single run after booting the recovery media, or permanently which you do when creating the recovery media with Paragon. In my case, I needed to install a Silicon Image eSATA driver for the backup media. To install permanently it states that you need the ADK installed. However, when I tried this, I could not find the option to add a driver when building the recovery media at all despite repeated attempts and careful reading of the Paragon docs. I tried this with and without the ADK installed, and to no avail. I also could not find another way to plant a boot up call to a batch file of my own in the recovery media build.

I therefore went for an alternative solution. The paragon recovery environment has an option under the settings menu to open a command prompt. When I checked online, it was possible to load a driver from this prompt using the Windows PE drvload command, and just passing it the .inf file for the driver kit to be loaded. Again, this is a temporary load just for this bootup, but it works fine.

When I first tried this, it loaded the driver and the disk, but did not mount the disk and assign a drive letter. I could see the disk using diskpart, but no drive letter was assigned. I then investigated and found that auto mounting was not enabled under the recovery environment, and this caused the problem. Whilst I could mount and assign a driver letter seperately, a nicer solution was to enable automounting before loading the driver. This could be done with the automount enable command in diskpart. Once this was done, loading the driver with drvload caused the disk to load and mount fully, and after switching back to the backup/restore view the recovery environment indicates that this load/refresh is in progress and then displays the backup disk correctly.

To simplify this, I created a batch file and diskpart script to do these operations, and placed these along with the driver kit on the bootable media, with the main batch file mount-backup.bat in the root and a subfolder mount-backup containing the other files/drivers. It was then only necessary to run this batch file from the dos prompt after the recovery environment had initially booted, e.g. typing “J:\mount-backup” was enough. Note that a CD/DVD drive did not show in the drive list displayed by Paragon, even though it was loaded and mounted – it only showed the disks. (If booting from a flash drive, this does show up so you don’t have this issue.) An easy way to find the drive letter for the CD/DVD drive was to run diskpart from the command prompt, and just enter “list volume”. This listed all the drives and their drive letters. Note that “list disk” is similar but does not display the drive letters. From this I saw my DVD drive listed as drive J and could immediately run the batch file on it. Whilst this is not a “one click” solution, it is fine in this situation as performing a bare metal restore using bootable recovery media is not a one click operation anyway.

mount-backup.bat

%echo on
set _SCRIPT_DRIVE=%~d0
set _SCRIPT_PATH=%~p0

diskpart /s “%_SCRIPT_DRIVE%%_SCRIPT_PATH%mount-backup\diskpart.txt”
drvload “%_SCRIPT_DRIVE%%_SCRIPT_PATH%mount-backup\drivers\SI3132\SI3132.inf”

diskpart.txt

automount enable
exit

Comments Off on Creating a Paragon Backup Recovery Disc

This follows on from my original post here for Angular 6.

In Angular 11, the up-and-coming approach to this is to use Module Federation for remote loading of microapps/micro-frontends. Manfred Steyer has a new article series on this whole approach here, and the second article about using Angular for this may be found here.

My issue with module federation at present is that it is still appears too nascent to simply ‘just work as standard’ with angular – the above posts need a number of workarounds including the use of yarn, and I was unwilling to switch to this method just for my present requirement which is just the generation of simple proof of concept work.

At present, I am therefore continuing to use my original approach as above for my POC work, as it still works with Angular 11. I have tweaked the approach a little to allow performing production builds, by disabling the hashes added to the filenames (I already use my own alternative method for cache busting/cache avoidance using a query string parameter). Details are shown below.

package.json scripts section

{
  "name": "microapp-fabric-prototype",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "prebuild": "npm run scss",
    "build": "ng build",
    "postbuild": "node post-build.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "scss": "npm run scss1",
    "scss1": "cd src/assets/resources/themes/salient-v11-violet && sass theme.scss:theme.css --source-map .",
    "prebuildProd": "npm run scss",
    "buildProd": "ng build --prod --output-hashing none",
    "postbuildProd": "node post-build-prod.js"
  },

post-build.js

/* Do post build actions on the webpack bundle.
 * Rename the webpack jsonp objects throughout, to prevent invalid multiple bootstraps due to name collisions
 * This is due to an angular bug - see here: https://github.com/angular/angular/issues/23732
 * This script requires the npm replace package: https://www.npmjs.com/package/replace
 * To install use: "npm install replace -g" */

var replace = require("replace");

doWebpackReplace('MicroappFabric','microapp-fabric-prototype',
 ['main.js', 'polyfills.js', 'runtime.js', 'vendor.js']);

function doWebpackReplace(name, filename, paths) {
 replace({
   regex: '\\["webpackJsonp"\\]',
   replacement: `["webpackJsonp${name}"]`,
   paths: paths.map((p) => `dist\\${filename}\\${p}`),
   recursive: false,
   silent: false,
 });
}

post-build-prod.js

/* Do post production build actions on the webpack bundle.
 * Rename the webpack jsonp objects throughout, to prevent invalid multiple bootstraps due to name collisions
 * This is due to an angular bug - see here: https://github.com/angular/angular/issues/23732
 * This script requires the npm replace package: https://www.npmjs.com/package/replace
 * To install use: "npm install replace -g" */

var replace = require("replace");

doWebpackReplace('MicroappFabric','microapp-fabric-prototype',
 ['main.js', 'polyfills.js', 'runtime.js']);

function doWebpackReplace(name, filename, paths) {
 replace({
   regex: 'window\\.webpackJsonp',
   replacement: `window.webpackJsonp${name}`,
   paths: paths.map((p) => `dist\\${filename}\\${p}`),
   recursive: false,
   silent: false,
 });
}

At present, I will continue to monitor the situation with Module Federation, and will likely switch to using it when it really is working ‘out of the box’ with no tweaks or complications.

Comments Off on Angular 11 – remote loading of Angular Element from separately deployed webpack bundle

… as above – I received the following error in relation to a PrimeNG p-dropdown used with a p-dataview:

Error: The target entry-point “primeng/dataview” has missing dependencies:
– @angular/cdk/scrolling

This issue is covered here.
I haven’t seen this before, but installing @angular/cdk resolved the build failure. This appears to be a transitive dependency issue which should have been resolved by my dependencies on PrimeNG.

Comments Off on PrimeNG 11/Angular 11 build fails due to missing @angular/cdk dependency

I was using a JSON file to hold external configuration for an agular application, using the pattern detailed previously here, and the loading mechanism detailed here.

The configuration pattern used allowed parameters to be overridden dynamically from query string parameters, so that for example you could choose an application theme in your URL.

I wanted to further extend this to allow sticky configuration parameters using localStorage, in particular to support a sticky pinnable title banner as detailed previously here. The aim was that both the query string support and the sticky localStorage support would be encapsulated in the configuration pattern and all transparently handled by the existing configuration service. The service would be enhanced with a new method call to allow persisting of a sticky parameter to localStorage and to the loaded config, for example for my sticky pinnable banner, to allow calling to persist the new pin state when the pin state was changed via the pin button. The previous pin state would then be loaded when the site was subsequently visited. Sticky parameters would override settings in the JSON file, and query string parameters would further override both of the former, and a query string parameter would also be sticky and would persist to localStorage, so for example the previous theme selected in the URL would be remembered.

One challenge was that whilst the configuration structure conformed to a Typescript interface, I needed to dynamically update configuration parameters from query string parameters or localStorage. This meant using dynamic keys e.g. based on the querystring parameters. Whilst this was initially possible by casting the config structure and using a map style lookup with config[keyVariable], it was not possible to dynamically infer the type of a configuration parameter from the interface, noting that both query string and localStorage parameters are strings. Often this is not a problem, as the default javascript behaviour will quite often cope, but therein lies a danger. In one case with a boolean, my query string/localStorage parameter was of course a string, and when written to the configuration using a dynamic key name as above, it was written as a string rather than the boolean expected in the interface. This meant that the value ‘false’ was in fact interpreted as true, due to the standard javascript truthy behaviour whereby a non empty string counts as true.

In the end, my solution was to have a subsection in the configuration, called dynamicParams, which contained all these dynamic parameters. It was therefore a requirement that all the dynamic parameters were strings and that client code reading the configuration had to be aware of that and convert as required.

One useful feature was to use Typescript intersection types for the dynamic parameters section, as detailed here. This allowed me to specify the dynamic parameter names explicitly, to allow them to be read in code directly as for example using config.dynamicParams.theme. I could also use programmatic access as above using config[keyVariable].

The section of the interface definition to do this was as follows:-

export interface AppConfig {
   appTitle: string;
   description: string;

   /* These parameters can be overridden from URL query parameters
    * and/or sticky local storage parameters
    * They must all be strings as are accessed by key programmatically */
   dynamicParams: {[key: string]: string | undefined} &
      {
         theme: string;
         pinBanner?: string;
         profileId?: string;
      };
   propertyDetail: {
      defaults: {
      photoLinkHoverText: string;
   }
   …

A particular point of note was that the intersection type using “&” was needed for this to work, rather than the union type “|”.

This solved the problem satisfactorily and all worked fine.

Comments Off on Dynamic Typing issues with Typescript/Angular 11

My initial attempt on this was to use static positioning when the title bar was unpinned (e.g. scrollable), and fixed positioning when the bar was pinned.

When using fixed positioning as above, the title bar is no longer in the normal flow so the rest of the content (in my case, encapsulated in a main container div) will sit underneath the title bar. I therefore used a top margin when pinned to prevent the top of the content being hidden. Some issues arose with this as follows:

1/ It was necessary therefore to add an additional margin to the main container to avoid occluding the content under the title bar, which meant exactly knowing its height. In addition, to allow a gap between the title bar and the content when pinned, I added a border to the title bar of the same colour as the page background, in effect to act as a kind of margin. This worked fine.

1/ My title bar was floated, so it automatically resized to fit its content. this meant that the margin allowance on the main content div would have to vary dynamically on resize.

2/ One way around this was to set media query breakpoints to trigger on the resize, and to set a fixed height for the title bar rather than floating it, and setting the margin on the content to match in each media query. In addition to this, I implemented a flexbox solution where the container was sized and the content centered within it. I was not so keen on this as it lost the ability to dynamically resize the title bar container as needed by the content resizing, and might cause problems if the layout/text changed in the title bar for example.

3/ Another way was to use a resize event and change the size of the margin on the content programmatically, using an rxjs debounced resize event. This worked pretty well, but I needed to switch the content margin on and off when the title bar was pinned/unpinned. This should have worked ok, but I noticed some slight visual movements in some page elements on pinning change, even though I could not see any style or layout changes in the browser inspector. This was annoying.

4/ I then tried using absolute positioning of the title bar when unpinned, and fixed positioning when pinned. This relied on using the same programmatic margin on the content for both, and in fact simplified the code, as I did not have to switch off the programmatic margin change when unpinning the title bar – it was used all the time, as absolute positioning was also outside the normal flow. Also, the slight glitches I saw on the page were completely eliminated.

I therefore stuck with method 4/ as the final solution. Some sample code showing the programmatic resize is as follows:-

private readonly resizeDebounceTime = 100;
private resizeObservable!: Observable<Event>;
private resizeSubscription!: Subscription;
private readonly formatPixelSize = (pixels: number) => `${pixels}px`;

…

ngAfterViewInit(): void {
   this.initBannerSpacingAdjustment();
}

ngOnDestroy(): void {
   this.destroyBannerSpacingAdjustment();
}

private initBannerSpacingAdjustment(): void {
   this.adjustBannerSpacing();
   this.resizeObservable = fromEvent(window, 
      ‘resize’).pipe(debounceTime(this.resizeDebounceTime));
   this.resizeSubscription = this.resizeObservable.subscribe(event => 
      this.adjustBannerSpacing());
}

private destroyBannerSpacingAdjustment(): void {
   if (this.resizeSubscription) {
      this.resizeSubscription.unsubscribe();
}
}

private adjustBannerSpacing(): void {
   /* note that the offsetHeight is the total height of the banner,
    * including padding and border */
   this.mainContainer.nativeElement.style.marginTop =
      this.formatPixelSize(this.banner.nativeElement.offsetHeight);
}

 

Comments Off on Pinning a title bar on a page with Angular 11/PrimeNG 11

Update 4/3/21

I had problems again when trying to display font-awesome icons in a microapp/web component. In this case, my parent fabric application which loaded the web component had font awesome loaded in package.json but not in angular.json. I removed font-awesome from the web component application in both package.json and angular.json as the parent had loaded it in both places. This then worked correctly. There may be a similar issue with e.g. the prime icons etc. but have not researched this. Clearly PrimeNG itself is needed in both applications as the child web component has development dependencies on it. My theme styling however is only loaded in the parent fabric, and it makes sense that font-awesome behaves the same way.

Original Post

My previous post about using font awesome with Angular  up to v6 and PrimeNG up to v6 is here

With PrimeNG 11, Prime have introduced their own icon set, PrimeIcons.

I wanted to use some font awesome icons as well as they have a larger set, but initially they would not display. When trying again later it all worked fine, and am unsure what I got wrong the first time around. To be clear, the following steps were needed:

1/ Install font awesome and add to package.json (–save adds to package.json)

npm install font-awesome –save

2/ Add a style reference to angular.json

“styles”: [
“node_modules/primeng/resources/primeng.min.css”,
“node_modules/font-awesome/css/font-awesome.min.css”,
“node_modules/primeicons/primeicons.css”,
“src/messages.scss”,
“src/styles.scss”
],

Double check that the referenced css file actually exists under node-modules for the version in use. in my case, this was 4.7.0.

I was looking for pin/unpin icons for a banner bar, and could only find a vertical pin, fa-thumb-tack – I also wanted a horizontal pin to designate the unpinned state. Fortunately, font awesome has the ability to transform icons e.g. to rotate them. This is more limited in v4, but rotation is allowed, so my reference was as follows:

<p-toggleButton [(ngModel)]="bannerPinned" onIcon="fa fa-thumb-tack" offIcon="fa fa-thumb-tack fa-rotate-90"
                class="ss-pin-banner"></p-toggleButton>

This worked perfectly. v5, which was not available directly to install via npm at the time, allows more transformations. The transforms are detailed in this stack overflow post and this font awesome page.

Comments Off on Using Font Awesome with Angular 11/PrimeNG 11

As above, a webpack build in angular 11 which loaded and ran fine locally failed to load when deployed to a subdirectory of a domain hosted using cpanel.

This post here goes into the cause of the issue. The simple solution in my case was to change <base href=”/”> in index.html to <base href=”./”>. This then supports any subdirectory

In fact upon reviewing some past angular code, it appears that previous projects did include this change, but it was not clear if I had done this or if it was by default, and I could not remember.

This fix resolved the issue. Note that as per the post, there are build switches which allow changing of the href, but my change did not get overriden, and works fine for both development and prod situations, so I just left it in permanently.

Comments Off on 404 errors on load when angular 11 app deployed to a domain subdirectory

This follows on from this earlier post for Angular 6.

PrimeNG has for some time removed support for legacy themeroller themes and added their own architecture and theme editor. However, for the first time, the theme editor and the SCSS theming interface/standard SCSS files are no longer open source, but are a paid for option. The rest of the component set, including the delivered compiled css for all the standard themes, is available as open source as before.

Therefore, having considered the options, I elected to take a standard theme that was close to what I needed and edit its css directly. This is suggested as an option by Prime for small changes, but it is possible that later changes to the theme architecture could require theme changes as we are editing the compiled css. I decided that the risk and rework that might be needed was small, so have taken this route.

My policy on this is to copy the theme files to a new theme folder under assets/resources/themes/, and then to rename the theme.css file to theme.scss, as the compiled css is also valid scss. This then allows me to add my own variables as required for theme colours etc. to avoid duplication. The intention is to minimise alterations to the original theme, so I would only add variables where I had made changes, to minimise any rework if I had to take a new version of the standard theme and add my changes again.

Whilst doing this, I noted a warning that node-sass, as used previously, is now deprecated. I therefore switched to sass, as per this stackoverflow post, using npm uninstall -g node-sass followed by npm install -g sass. This worked fine, and my changes to the existing compilation script in package.json (also allowing multiple themes to be compiled) were as follows:-

 “scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“scss”: “npm run scss1 && npm run scss2”,
“scss1”: “cd src/assets/resources/themes/salient-new && sass theme.scss:theme.css –source-map .”
“scss2”: “cd src/assets/resources/themes/salient-new2 && sass theme.scss:theme.css –source-map .”
},

Comments Off on Creating and compiling a Custom PrimeNG 11 theme deployed as a static asset