Angular: What does "Cannot read property 'childNodes' of null" trying to tell?

Recently, I ran into the following error, it has no obvious problem at first until part of my component template didn't show a thing until a click event is triggered the at the screen.

Cannot read property 'childNodes' of null

The error do not directly indicate which component or code in a template has gone wrong, but you know it's an error about certain part of the code is referring to "childNodes" on a null object.

Finding out the root cause

To find out where in the template has gone wrong, I didn't suspect it's problem with HTML template. I had started with checking my component class code, and though some binding values weren't pass correctly into the template code (the template code look fine, not bad syntax at all!).

Until I gave up trying consciously, I blindly test by removing of the HTML code part by part. This is where it shed me the ray of hope, eventually, I found out it's ion-card Ionic's component doesn't accept [innerHtml] correctly.

If you insist on using ion-card, you need a proper "child node" place inside it (so now I learnt, "child node" means the child element of a parent node "ion-card".), for ion-card, one of the options is ion-card-content.

I changed my code from:

<ion-card [innerHtml]="content" padding></ion-card>

to

<ion-card>
  <ion-card-content [innerHtml]="content"></ion-card-content>
</ion-card>

Separating [innerHtml] from ion-card would solve the childNode problem above. You might have different parent node causing the null childNodes issue too. So to prevent further time wasting effort finding the root-cause and if you run into similar issue, just keep in mind, if you get similar error, it means there is problem in your template/html code.

TypeError: Found non-callable @@iterator - Migration of Angular 7 to 8 (upgrading Ionic: 4.6.0 > 4.7.1)

Troubleshoot migration problems

TypeError: Found non-callable @@iterator

TypeError: Found non-callable @@iterator

The non-descriptive error message Found non-callable @@iterator, for new Angular 8 user like me, has made the upgrading journey a difficult experience.

And my finding, the cause of the problem above is due to the way interceptor written in Angular 7.

Causes: HttpRequest's headers "set"

I noticed the use of request.headers.set() causing the issue above. My sample code (causes):

intercept(req: HttpRequest, next: HttpHandler): Observable> {
  let headers = req.headers;
  const sampleToken = 'SAMPLE_TOKEN';
  headers = req.headers.set('Authorization', sampleToken);

  return next.handle(req.clone({ headers }));
}

After multiple trial and error, the only way to resolve is avoid using the same way to add header with such solution.

Solution: Headers modification

- on one single header modification, do the following

const yourToken = 'YOUR_TOKEN';
const apiReq = req.clone({
  headers: new HttpHeaders({'Authorization', yourToken})
});
return next.handle(apiReq);

- on multiple headers modification, do the following

const headers = { Authorization: authToken };
const apiReq = req.clone({
  setHeaders: headers
});
return next.handle(apiReq);

P/S: header value must be in string value

Troubleshooting Cakephp 3 showing "Blank page" (Clue: internationalisation (i18n))

Understanding i18n

To implement multiple languages in your webpage, you need internationalisation (or i18n, start with an alphabet "i", 18 alphabet in the middle and end with an "n").

If you have came across this feature, you'll know you need your static content written in the following format:

echo __('Text to be translated');

And the "Text to be translated" will appear in your Locale folder's in "po" formatted file.

Potential cause of the "Blank page"

Overview of the findings, the "blank" page appears in:

• complete blank screen and show nothing, 
• browser is showing correct code in the HTML page source (without HTML code from chosen layout)
• page goes blank without any warning/error messages

Things to check for the issue

• is the "__()" written correctly? Make sure it's 2 underscores + text in the bracket.
• Search your source code and find if there is any mistakenly written single underscore "_()" i18n syntax
• be warned, you won't get any error message from single underscore i18n syntax "_()" mistake

References:
CakePHP 3 - Internationalization & Localization
CakePHP 3 - Global function __()