Angular 16 migration breaks templateRef

[smarsh-tejaskatariya]

After migration to angular 16, templateRef breaks, all the custom elements are rendered below table

It was working fine till angular 15

below are the versions of data-tables
"angular-datatables": "^16.0.0",
"datatables.net": "~1.13.4",
"datatables.net-bs5": "~1.13.4",
"datatables.net-dt": "~1.13.4",
"datatables.net-fixedcolumns": "~4.3.0",
"jquery": "^3.7.1",
"@types/datatables.net": "~1.10.28",

[shanmukhateja]

Please provide reproducible repo or StackBlitz link to investigate.

[tejaskatariya]

Let me try to create a reproducible stackblitz, till then is there anything I need to care while migrating to angular 16?

[smarsh-tejaskatariya]

This was breaking due to setting "preserveWhitespaces" in main.ts file.

changing

platformBrowserDynamic()
.bootstrapModule(AppMainModule, { preserveWhitespaces: true })
.then(success => console.log(Application started))
.catch(err => console.error(err));

to

platformBrowserDynamic()
.bootstrapModule(AppMainModule)
.then(success => console.log(Application started))
.catch(err => console.error(err));

solved the issue