Fix double rendering of components after hydration in SSR mode angular (#28757)

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

@@ -45,24 +45,23 @@ gulp.task('clean.generatedComponents', (done) => {
 
   del.sync([
     `${outputFolderPath}/*/**`,
-    ...skipFromCleaningFiles.flatMap(keepPattern => {
-      const pathParts = keepPattern.match(/[\*\/]$/) ? keepPattern.split('/') : [keepPattern];
+    ...skipFromCleaningFiles.flatMap((keepPattern) => {
+      const pathParts = /[\*\/]$/.exec(keepPattern) ? keepPattern.split('/') : [keepPattern];
 
       const patternsToKeep = pathParts.reduce((acc, pathPart) => {
-
-        if(pathPart) {
-          acc.path += '/' + pathPart;
+        if (pathPart) {
+          acc.path += `/${pathPart}`;
           acc.patterns.push(`!${acc.path}`);
         }
 
         return acc;
       }, {
         patterns: [],
-        path: outputFolderPath.replace(/\/$/,'')
+        path: outputFolderPath.replace(/\/$/, ''),
       }).patterns;
 
       return patternsToKeep;
-    })
+    }),
   ]);
 
   done();
@@ -101,7 +100,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 +212,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',
@@ -262,11 +261,9 @@ gulp.task('generate-component-names', (done) => {
   done();
 });
 
-gulp.task('copy.dist.dx-angular', () => {
-  return gulp
-    .src(`${buildConfig.npm.distPath}/**/*`)
-    .pipe(gulp.dest(path.join(buildConfig.components.testsPath, 'node_modules/devextreme-angular')));
-});
+gulp.task('copy.dist.dx-angular', () => gulp
+  .src(`${buildConfig.npm.distPath}/**/*`)
+  .pipe(gulp.dest(path.join(buildConfig.components.testsPath, 'node_modules/devextreme-angular'))));
 
 gulp.task('build.tests', gulp.series('clean.tests', 'generate-component-names', 'copy.dist.dx-angular', () => {
   const config = buildConfig.components;
@@ -289,7 +286,7 @@ const getKarmaConfig = function (testsPath) {
   return karmaConfig.parseConfig(path.resolve('./karma.conf.js'), {
     files: [{ pattern: testsPath, watched: false }],
     preprocessors,
-  }, {throwErrors: true});
+  }, { throwErrors: true });
 };
 
 gulp.task('test.components.client', gulp.series('build.tests', (done) => {
@@ -298,6 +295,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,