fix: create image using document method to avoid ReferenceError in SSR

[duongleh]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #6559

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[zorro-bot]

This preview will be available after the AzureCI is passed.

[codecov]

Codecov Report

Merging #6569 (68a6252) into master (bc0e468) will increase coverage by 0.03%.
The diff coverage is 88.46%.

❗ Current head 68a6252 differs from pull request most recent head 107f0d3. Consider uploading reports for the commit 107f0d3 to get more accurate results

@@            Coverage Diff             @@
##           master    #6569      +/-   ##
==========================================
+ Coverage   89.88%   89.92%   +0.03%     
==========================================
  Files         481      481              
  Lines       15374    15381       +7     
  Branches     2343     2344       +1     
==========================================
+ Hits        13819    13831      +12     
+ Misses        937      929       -8     
- Partials      618      621       +3     

Impacted Files	Coverage Δ
components/select/select.component.ts	87.09% <66.66%> (ø)
components/tree-select/tree-select.component.ts	88.84% <80.00%> (-0.05%)	⬇️
components/date-picker/date-picker.component.ts	93.50% <100.00%> (+0.04%)	⬆️
components/date-picker/picker.component.ts	89.94% <100.00%> (ø)
components/drawer/drawer.component.ts	97.08% <100.00%> (-0.92%)	⬇️
components/image/image.directive.ts	89.39% <100.00%> (+0.16%)	⬆️
components/select/option-group.component.ts	100.00% <100.00%> (ø)
components/select/option-item-group.component.ts	100.00% <100.00%> (ø)
components/select/option-item.component.ts	93.10% <100.00%> (ø)
components/select/option.component.ts	100.00% <100.00%> (ø)
... and 13 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bc0e468...107f0d3. Read the comment docs.

[vthinkxie]

Hi, there is some test failed, the detailed is below
https://dev.azure.com/ng-zorro/NG-ZORRO/_build/results?buildId=3439&view=logs&jobId=279bf605-51e8-5634-b9b8-b38240bbf17e&j=279bf605-51e8-5634-b9b8-b38240bbf17e&t=f720c3be-c865-5389-3eca-d1d8af810617

retry

[duongleh]

@hsuanxyz Can you help me with the unit test?

[hsuanxyz]

@duong-le I have not found an alternative to the current change, until #1836 · jasmine/jasmine is processed.

so I suggest skipping the previewImage method on the server side (like https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/upload/upload-list.component.ts#L171).

[duongleh]

@hsuanxyz I skipped the previewImage method as below but the test case still failed. Do you think I should skip the test case?

[hsuanxyz]

@duong-le try this.

private previewImage(file: File | Blob): Promise<string> {
+  if (!this.platform.isBrowser) {
+   return Promise.resolve('');
+  }
return new Promise(resolve => {
 ...
  this.ngZone.runOutsideAngular(() => {
     ...
+    const img = new Image();
-    const img = this.doc.createElement('img'); 
     ...
  });
 ...
});
}

[duongleh]

@hsuanxyz All test cases are now passed, please review once again. Thank you very much.

[hsuanxyz]

LGTM

[duongleh]

@hsuanxyz please release this fix as a minor version. I really need this fix in my app in production.

[hsuanxyz]

@duong-le https://github.com/NG-ZORRO/ng-zorro-antd-builds/releases/tag/11.4.0%2Bd7b9291dfd
you can use build version.

package.json

  "dependencies": {
+   "ng-zorro-antd": "github:NG-ZORRO/ng-zorro-antd-builds#011764a7b2187fcf9eb05a22a44cf11e7f41b62d"
  }