Fix double rendering of components in SSR mode after hydration in Angular (#28685)

Author: GoodDayForSurf

package.json

@@ -44,7 +44,7 @@
     "axe-core": "4.10.2",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "6.0.2",
-    "devextreme-internal-tools": "16.3.0",
+    "devextreme-internal-tools": "16.3.1",
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest": "29.7.0",

packages/devextreme-angular/gulpfile.js

@@ -101,7 +101,7 @@ gulp.task('before-generate.preserve-component-files', (done) => {
     return () => gulp.src(src).pipe(gulp.dest(dest));
   });
 
-  gulp.parallel(...tasks)(done)
+  gulp.parallel(...tasks)(done);
 });
 
 gulp.task('generate.facades', gulp.series('generate.moduleFacades', (done) => {
@@ -213,16 +213,16 @@ gulp.task('npm.content', gulp.series(
 
     return gulp.src([`${cmpConfig.outputPath}/**/collection.json`, ...npmConfig.content])
       .pipe(gulp.dest(npmConfig.distPath));
-  }
+  },
 ));
 
 gulp.task('npm.package-json', (cb) => {
   const pkgPath = path.join('.', buildConfig.npm.distPath, 'package.json');
   const pkg = require(`./${pkgPath}`);
   delete pkg.publishConfig;
-  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2))
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
   cb();
-})
+});
 
 gulp.task('npm.pack', gulp.series(
   'npm.content',
@@ -298,6 +298,8 @@ gulp.task('test.components.client', gulp.series('build.tests', (done) => {
 
 gulp.task('test.components.server', gulp.series('build.tests', (done) => {
   new karmaServer(getKarmaConfig('./karma.server.test.shim.js'), done).start();
+}, (done) => {
+  new karmaServer(getKarmaConfig('./karma.hydration.test.shim.js'), done).start();
 }));
 
 gulp.task('test.components.client.debug', (done) => {

packages/devextreme-angular/karma.hydration.test.shim.js

@@ -0,0 +1,19 @@
+require('./karma.common.test.shim');
+
+const testing = require('@angular/core/testing');
+const server = require('@angular/platform-server/testing');
+
+const windowUtils = require('devextreme/core/utils/window');
+
+const windowMock = {};
+windowMock.window = windowMock;
+windowUtils.setWindow(windowMock);
+
+testing.TestBed.initTestEnvironment(
+  server.ServerTestingModule,
+  server.platformServerTesting(),
+);
+
+const context = require.context('./tests/dist/server', true, /hydration\.spec\.js$/);
+context.keys().map(context);
+__karma__.start();

packages/devextreme-angular/karma.server.test.shim.js

@@ -14,6 +14,6 @@ testing.TestBed.initTestEnvironment(
   server.platformServerTesting(),
 );
 
-const context = require.context('./tests/dist/server', true, /\.spec\.js$/);
+const context = require.context('./tests/dist/server', true, /^.\/(?!(hydration)\.spec\.js$).*\.spec\.js$/);
 context.keys().map(context);
 __karma__.start();

packages/devextreme-angular/karma.test.shim.js

@@ -8,6 +8,6 @@ testing.TestBed.initTestEnvironment(
   browser.platformBrowserDynamicTesting(),
 );
 
-const context = require.context('./tests/dist', true, /^.\/(?!.*\/ssr-components\.spec.js$).*\.spec\.js$/);
+const context = require.context('./tests/dist', true, /^.\/(?!.*\/(ssr-components|hydration)\.spec\.js$).*\.spec\.js$/);
 context.keys().map(context);
 __karma__.start();

packages/devextreme-angular/src/server/render.ts

@@ -21,15 +21,21 @@ export class DxServerModule {
           const el = infernoRenderer.createElement(component, props);
           const document = container.ownerDocument;
           const temp = document.createElement(container.tagName);
+
           temp.innerHTML = renderToString(el);
+
           const mainElement = temp.childNodes[0];
           const childString = mainElement.innerHTML;
 
           for (let i = 0; i < mainElement.attributes.length; i++) {
-            temp.setAttribute(mainElement.attributes[i].name, mainElement.attributes[i].value);
+            const attr = mainElement.attributes[i];
+
+            if (!container.hasAttribute(attr.name)) {
+              container.setAttribute(attr.name, attr.value);
+            }
           }
-          temp.innerHTML = childString;
-          container.outerHTML = temp.outerHTML;
+
+          container.innerHTML = childString;
         },
       });
     }

packages/devextreme-angular/src/ui/accordion/index.ts

@@ -57,6 +57,7 @@ import { DxiAccordionItemComponent } from 'devextreme-angular/ui/accordion/neste
 @Component({
     selector: 'dx-accordion',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

packages/devextreme-angular/src/ui/action-sheet/index.ts

@@ -57,6 +57,7 @@ import { DxiActionSheetItemComponent } from 'devextreme-angular/ui/action-sheet/
 @Component({
     selector: 'dx-action-sheet',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

packages/devextreme-angular/src/ui/autocomplete/index.ts

@@ -103,6 +103,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-autocomplete',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

packages/devextreme-angular/src/ui/bar-gauge/index.ts

@@ -89,6 +89,7 @@ import { DxoBarGaugeTooltipBorderModule } from 'devextreme-angular/ui/bar-gauge/
     selector: 'dx-bar-gauge',
     template: '',
     styles: [ ' :host {  display: block; }'],
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,