NullInjectorError: R3InjectorError(ExampleModule)[SvgIconsModule -> SvgIconRegistry]

[zgabievi]

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

In angular 13 there is an exception about icon registry: NullInjectorError: R3InjectorError(AuthInfoDetailModule)[SvgIconsModule -> SvgIconRegistry]. Icons are rendered, but exception is thrown in console. It was working with angular v12.

Expected behavior

It should not throw an exception.

Minimal reproduction of the problem with instructions

Upgraded angular 12 project to 13 and updated svg-icons to v3.3.0

What is the motivation / use case for changing the behavior?

Environment

Angular version: 13.0.1


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 14.17.6 
- Platform: Mac 

Others:


Full exception:
Uncaught Error: Uncaught (in promise): NullInjectorError: R3InjectorError(ExampleModule)[SvgIconsModule -> SvgIconRegistry]: 
  NullInjectorError: No provider for SvgIconRegistry!
NullInjectorError: R3InjectorError(ExampleModule)[SvgIconsModule -> SvgIconRegistry]: 
  NullInjectorError: No provider for SvgIconRegistry!
    at NullInjector.get (core.mjs:11139)
    at R3Injector.get (core.mjs:11306)
    at injectInjectorOnly (core.mjs:4774)
    at Module.ɵɵinject (core.mjs:4778)
    at Object.SvgIconsModule_Factory [as factory] (ngneat-svg-icon.js:233)
    at R3Injector.hydrate (core.mjs:11476)
    at R3Injector.get (core.mjs:11295)
    at core.mjs:11333
    at Set.forEach ()
    at R3Injector._resolveInjectorDefTypes (core.mjs:11333)
    at resolvePromise (zone.js:1213)
    at zone.js:1283
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.mjs:25864)
    at ZoneDelegate.invokeTask (zone.js:405)
    at Zone.runTask (zone.js:178)
    at drainMicroTaskQueue (zone.js:582)

---

ngneat-svg-icon.js:233
SvgIconsModule.ɵfac = function SvgIconsModule_Factory(t) { return new (t || SvgIconsModule)(ɵngcc0.ɵɵinject(SVG_ICONS, 10), ɵngcc0.ɵɵinject(SVG_MISSING_ICON_FALLBACK, 8), ɵngcc0.ɵɵinject(SvgIconRegistry)); };

[NetanelBasal]

The library isn't compatible with Angular v13.

[zgabievi]

Upgraded to v4.0.2 and same error appears in console. Even though icons are rendered and working as expected.

[zgabievi]

Same problem again:

Angular CLI: 13.2.2 Node: 14.18.3 Package Manager: npm 6.14.15 OS: darwin x64

Angular: 13.2.1 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, platform-server ... router, service-worker

Package Version

@angular-devkit/architect - 0.1302.2 @angular-devkit/build-angular - 13.2.2 @angular-devkit/core - 13.2.2 @angular-devkit/schematics - 13.2.2 @angular/cli - 13.2.2 @nguniversal/builders - 13.0.2 @nguniversal/express-engine - 13.0.2 @schematics/angular - 13.2.2 rxjs - 7.5.2 typescript - .5.5 @ngneat/svg-icon - 4.0.2 @ngneat/svg-generator - 4.0.0

and so on for every module where svg icons are used...

[NetanelBasal]

Please reproduce on stackblitz.

[zgabievi]

I've found a solution. If someone would have same problem here it is.

In my case I was using lazy loading of components, using createNgModuleRef.

This method has second optional parameter, which should be injector. Just pass that parameter and console errors will disappear.