Angular-innerHTML is not rendered

[SpaxR]

Describe the bug
When using [innerHTML]-Directive in Angular, nothing is put into the DOM.
With JSDom or Karma the content exists in the Document.

To Reproduce
CodeSandbox

1. Install Angular with Jest and happy-dom / @happy-dom/jest-environment
2. Create Component. For Example: <div [innerHTML]="'TEST'"></div>
3. Write Test that reads the HTML: expect(fixture.nativeElement.innerHTML).toContain('TEST')
4. Run Jest
5. div is empty: <div></div>

Expected behavior
Angular should be able to render innerHTML into the DOM

Additional context
With a real browser, karma, or jest/jsdom the innerHTML is displayed,
so i guess the Problem is somewhere between happydom and Angular.

Angular doesn't trust the Content that gets provided via innerHTML, unless it can determine that it is "safe".
It is possible to bypass the security with Angular's DomSanitizer, but that gets hard to apply to third-party libraries.

---

My guess is that happy-dom does something that Angular doesn't deem safe,
and that's the point where my knowledge ends and help would be much appreciated.

[OlaviSau]

What version are you using? This issue has been fixed in the latest release.

[SpaxR]

Should be the latest Version (15.11.7): package.json
And for completeness:

// jest.config.ts
import type { Config } from 'jest';
export default <Config>{
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: [`${__dirname}/tests/setup.ts`],
  testEnvironment: '@happy-dom/jest-environment',
  testEnvironmentOptions: {
    width: 1920,
    height: 1080,
  },
};

setup.ts is only setting up mocks.

I also found Tickets, that i thought were similar, but not related:
#1494 #1498 #1533

I would try to figure it out myself, but it may take a while.

[OlaviSau]

I think I was mixing up the sanitizer with another issue as I have fixed it using patch-package on our project.
This PR should fix the issue, in the meanwhile you can use https://www.npmjs.com/package/patch-package to work around the issue.

--- a/node_modules/happy-dom/lib/dom-parser/DOMParser.js
+++ b/node_modules/happy-dom/lib/dom-parser/DOMParser.js
@@ -27,13 +27,16 @@ export default class DOMParser {
         const root = XMLParser.parse(newDocument, string, { evaluateScripts: true });
         let documentElement = null;
         let documentTypeNode = null;
+        let bodyElement = null;
         for (const node of root[PropertySymbol.nodeArray]) {
             if (node['tagName'] === 'HTML') {
                 documentElement = node;
             }
             else if (node[PropertySymbol.nodeType] === NodeTypeEnum.documentTypeNode) {
                 documentTypeNode = node;
-            }
+            } else if (node['tagName'] === 'BODY') {
+				bodyElement = node;
+			}
             if (documentElement && documentTypeNode) {
                 break;
             }
@@ -63,7 +66,7 @@ export default class DOMParser {
                 default:
                     {
                         const documentElement = newDocument.createElement('html');
-                        const bodyElement = newDocument.createElement('body');
+						bodyElement = bodyElement ?? newDocument.createElement('body');
                         const headElement = newDocument.createElement('head');
                         documentElement.appendChild(headElement);
                         documentElement.appendChild(bodyElement);

[SpaxR]

That did the trick! I had to make the changes in the cjs-folder, but now everything renders correctly.
Thank you for this patch!

[capricorn86]

Thank you for reporting @SpaxR! 🙂

This should now be fixed in v16.0.0, so the patch should not be necessary anymore.