Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nzTooltipTitle Error in ngHydration #8181

Closed
s-triar opened this issue Nov 21, 2023 · 0 comments · Fixed by #8512
Closed

nzTooltipTitle Error in ngHydration #8181

s-triar opened this issue Nov 21, 2023 · 0 comments · Fixed by #8512
Labels
👌 Already Fixed There is already a PR trying to solve this 🐛 Bug Component: Tooltip

Comments

@s-triar
Copy link

s-triar commented Nov 21, 2023

Reproduction link

Steps to reproduce

  1. use angular version 17 with SSR enabled
  2. create main component and in main.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { RouterModule } from '@angular/router';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzSpaceModule } from "ng-zorro-antd/space";
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
@Component({
  selector: 'app-main',
  standalone: true,
  imports: [
    CommonModule, 
    NzLayoutModule,
    NzButtonModule,
    RouterModule,
    NzIconModule,
    NzGridModule,
    NzSpaceModule,
    NzToolTipModule
  ],
  templateUrl: './main.component.html',
  styleUrl: './main.component.scss'
})
export class MainComponent {

}

  1. in main component html.
<nz-layout class="layout-main">
  <nz-header class="header-main">
    <span class="header-title-page">Toko</span>
  </nz-header>
  <nz-content id="content-main">
    <router-outlet></router-outlet>
  </nz-content>
  <nz-footer class="footer-navigation-main">
    <div nz-row nzJustify="space-around" nzAlign="middle">
      <div nz-col>
        <a
          nz-button
          nzSize="large"
          nzShape="circle"

          aria-label="Menu Home"
          role="navigation"
          nz-tooltip [nzTooltipTitle]="homeTooltip" nzTooltipPlacement="top" 
        >
          <span nz-icon nzType="home"></span>
        </a>
        <ng-template #homeTooltip>
          <span>Home</span>
        </ng-template>
      </div>
      <div nz-col>
        <a
          nz-button
          nzSize="large"
          nzShape="circle"

          aria-label="Menu Profile"
          role="navigation"
          nz-tooltip nzTooltipTitle="profileTooltip" nzTooltipPlacement="top" 
        >
          <span nz-icon nzType="user"></span>
        </a>
        <ng-template #profileTooltip>
          <span>Profile</span>
        </ng-template>
      </div>
      <div nz-col>
        <a
          nz-button
          nzSize="large"
          nzType="default"
          nzShape="circle"

          aria-label="Menu Daftar Toko"
          role="navigation"
          nz-tooltip [nzTooltipTitle]="daftarTokoTooltip" nzTooltipPlacement="top" 
        >
          <span nz-icon nzType="shop"></span>
        </a>
        <ng-template #daftarTokoTooltip>
          <span>Daftar Toko</span>
        </ng-template>
        
      </div>
    </div>
  </nz-footer>
</nz-layout>


What is expected?

There is no error issue when using angular 17 SSR

What is actually happening?

When using text and templateRef in parameter, it gets error

ERROR TypeError: rNode.hasAttribute is not a function
    at hasSkipHydrationAttrOnRElement (core.mjs:7445:18)
    at applyRootElementTransformImpl (core.mjs:12350:9)
    at applyRootElementTransform (core.mjs:12332:5)
    at locateHostElement (core.mjs:12322:5)
    at ComponentFactory.create (core.mjs:15479:13)
    at ViewContainerRef2.createComponent (core.mjs:19971:47)
    at new _NzTooltipDirective (ng-zorro-antd-tooltip.mjs:463:39)
    at NodeInjectorFactory.NzTooltipDirective_Factory [as factory] (ng-zorro-antd-tooltip.mjs:474:14)
    at getNodeInjectable (core.mjs:4366:44)
    at instantiateAllDirectives (core.mjs:12775:27)
Environment Info
ng-zorro-antd 17.0.1
Browser Edge

my package.json


  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/cdk": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/platform-server": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@angular/ssr": "^17.0.0",
    "@ant-design/icons": "^5.2.6",
    "@ant-design/icons-angular": "^17.0.0",
    "@auth0/angular-jwt": "^5.2.0",
    "express": "^4.18.2",
    "ng-zorro-antd": "^17.0.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },


```<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
👌 Already Fixed There is already a PR trying to solve this 🐛 Bug Component: Tooltip
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants