IconNotFoundError when using dynamically loaded icons with Angular Universal

[nicholasgerard]

Reproduction link

ng-zorro-antd/components/icon/icon.directive.ts

Line 139 in f40aad9

this.ngZone.runOutsideAngular(() => {

Steps to reproduce

1. Create a project with Angular Universal
2. Attempt to use dynamically loaded SVG icons as described in docs with nz-icon
3. Build for SSR and run locally
4. App crashes

What is expected?

Icons are loaded

What is actually happening?

Angular is running on http://localhost:4000
Angular is running in development mode. Call enableProdMode() to enable production mode.
/Users/xxx/Documents/yyy/dist/zzz/server/main.js:309464
              throw error;
              ^

Error: [@ant-design/icons-angular]:the icon delete-o does not exist or is not registered.
    at IconNotFoundError (/Users/xxx/Documents/yyy/dist/zzz/server/main.js:477160:10)
    at /Users/xxx/Documents/yyy/dist/zzz/server/main.js:477315:15

Environment	Info
ng-zorro-antd	13.0.1
Browser	Any

---

See refactor of changeIcon2 in NzIconDirective 12.1.1:

ng-zorro-antd/components/icon/icon.directive.ts

Line 139 in f40aad9

this.ngZone.runOutsideAngular(() => {

It appears this throws the above error when running in a Node environment (e.g. Angular Universal).

[arturovt]

Hey @nicholasgerard . I've just tried the older version of the nz-icon in the simple skeleton app and I got the same error, because it can't load the SVG on the server-side (the xhr2.XMLHttpRequest throws an error that protocol is unsupported).

[nicholasgerard]

Makes sense, thanks!

[nicholasgerard]

This still seems to be an issue in 13.1.0.

[arturovt]

Hey @simplejason . I could guess this commit 84b00c7 was cherry-picked into this 4bd86ca, so the changes were just lost?

[simplejason]

Hey @simplejason . I could guess this commit 84b00c7 was cherry-picked into this 4bd86ca, so the changes were just lost?

Cool, I will review and merge it :) We will release ng-zorro-antd to v13.1.1 this week!