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

Question

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

score 3 · Accepted Answer · answered Mar 29 '21 at 15:25

3

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

answered Mar 29 '21 at 15:25

David

33,444
11
80
118

Thanks for your lovely answer but why this information I did not get anywhere or missing any documentation ! I have few more lazy-loaded module missing or error, can you suggested me how can I overcame all of those problem, except do question in Stack overflow. I am suffering by last 4/5days with multiple error for angular universal :( – MD Ashik Mar 29 '21 at 17:19
1

There is no magical answer. Have a look there, it might help https://github.com/angular/universal/blob/master/docs/gotchas.md – David Mar 29 '21 at 17:35

score 0 · Answer 2 · answered Aug 31 '23 at 12:36

From the angular-svg-icon docs:

BREAKING CHANGE: as of angular-svg-icon@9.0.0, an explicit call to forRoot() must be made on the module's import.

The angular-svg-icon should work as-is with webpack/angular-cli. Just import the AngularSvgIconModule and the HttpClientModule.

import { HttpClientModule } from '@angular/common/http';
import { AngularSvgIconModule } from 'angular-svg-icon';

@NgModule({
  imports: [ HttpClientModule, AngularSvgIconModule.forRoot() ],
  ...
})
export class AppModule {}

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

2 Answers2