ng-jhipster | JHipster Angular library | Frontend Framework library

I am starting to learn JHipster with the "Full Stack Development with JHipster (Second Edition)" book which uses JHipster 6.5.0.

In Chapter 5 "Customization and Further Development" the default table view is replaced by a list. In order to bring back the sorting functionality, the authors include the following jhiSort directive (page 134):

jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)"

as part of this code snippet:

1. I am working with ngb-datepicker which is working fine if no initial values or predefined values are set but when trying to use it formControlName or with [(ngModel)] with an existing predefined value the predefined or initial value is not setting on the redenied view. Imagine this as a scenario of editing a form or record with prefilled values. Other formControls with text and numbers are working as intended.
2. I am using NgbStruct Model but still not working.
3. I tried and debugged the code the value are getting assigned to the form control in a patchValue method and in the format of NgbStruct but not seen in the rendered view
4. I tried to implement similar scenario in example provided in stack blitz by ng-bootstrap it is working fine there

Package.json file

I have created a new project and am trying to set up the production environment properly. I haven't added any entities yet so it's still an empty JHipster project! Unfortunately Elasticsearch keeps throwing an exception and it doesn't work out of the box.

Exception:

Here what we have in browser's debug:

I have an Angular 4.3.2 app that has been running for a few years. I need to fix some vulnerabilities that were found in the various packages (many of which were fixed with a npm audit fix). However after I fixed a bunch of vulnerabilities in the package.json (and upgrading some code in the package* files), I then do a 'npm start' and webpage does not load. After inspecting the page and checking the console, it prints this out:

I try to configure sort column using the rout.ts file of my entity.

In the "data" tag I put defaultSort: ['firstCol,desc','secondCol,asc'], but I gave an error.

Then I put all in a single String defaultSort: 'firstCol,desc,secondCol,asc', but the secondCol is not considered the the query sent to microservice

Then I put all in a single String using a char separator like ";" 'firstCol,desc;secondCol,asc' but nothing! The secondCol is not considered.

I try to debug and see the ng-jhipster.js?064b file and see: