[SOLVED] Angular SVG Icon does not work with Angular Universal project lazy loading module

Angular SVG Icon does not work with Angular Universal project lazy loading module

Angular: 11.2.5
Typescript: 4.0.2
Angular-svg-icon: 11.2.0

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppHomeModule)[SvgIconRegistryService -> SvgIconRegistryService -> SvgLoader -> TransferState -> TransferState -> TransferState]: 
  NullInjectorError: No provider for TransferState!
NullInjectorError: R3InjectorError(AppHomeModule)[SvgIconRegistryService -> SvgIconRegistryService -> SvgLoader -> TransferState -> TransferState -> TransferState]:

Component html:

<svg-icon src="call.svg" [svgStyle]="{ 'width.px':90 }"></svg-icon>

lazy-loaded module call:

imports: [
   ...
   AngularSvgIconModule
],

app.module.ts

Solution

You need to import BrowserTransferStateModule on the client side (app.module.ts) and ServerTransferStateModule on the server side (app.server.module.ts)