Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot inject Renderer2 when the application uses Renderer3!

See original GitHub issue

Which @angular/* package(s) are the source of the bug?

core, forms

Is this a regression?

Description

In my code, I was injecting some providers when calling createComponent() method of ViewContainerRef. It worked well. But after upgrading Angaulr version from 13.1 to 13.2, I got ‘Cannot inject Renderer2 when the application uses Renderer3!’ error .

The code works well if I remove the options for createComponent() method, however, I don’t want to remove that. Please help with this issue 😭

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

core.mjs:6468 ERROR Error: Cannot inject Renderer2 when the application uses Renderer3!
    at getOrCreateRenderer2 (core.mjs:21014:1)
    at injectRenderer2 (core.mjs:21025:1)
    at Renderer2.__NG_ELEMENT_ID__ (core.mjs:21009:1)
    at getOrCreateInjectable (core.mjs:3383:1)
    at Module.ɵɵdirectiveInject (core.mjs:14389:1)
    at NodeInjectorFactory.DefaultValueAccessor_Factory [as factory] (forms.mjs:254:1)
    at getNodeInjectable (core.mjs:3548:1)
    at searchTokensOnInjector (core.mjs:3485:1)
    at getOrCreateInjectable (core.mjs:3429:1)
    at ɵɵdirectiveInject (core.mjs:14389:1)
defaultErrorLogger @ core.mjs:6468
handleError @ core.mjs:6515
handleError @ core.mjs:10940
executeListenerWithErrorHandling @ core.mjs:14963
wrapListenerIn_markDirtyAndPreventDefault @ core.mjs:14998
(익명) @ platform-browser.mjs:466
invokeTask @ zone.js:406
onInvokeTask @ core.mjs:25459
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
invokeTask @ zone.js:1600
globalZoneAwareCallback @ zone.js:1626

Please provide the environment you discovered this bug in (run `ng version`)

Angular CLI: 13.2.0
Node: 14.17.0
Package Manager: npm 6.14.13
OS: win32 x64

Angular: 13.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.0
@angular-devkit/build-angular   13.2.0
@angular-devkit/core            13.2.0
@angular-devkit/schematics      13.2.0
@schematics/angular             13.2.0
rxjs                            7.4.0
typescript                      4.5.5

Anything else?

No response

Issue Analytics

State:
Created 2 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

3reactions

alxhubcommented, Feb 1, 2022

@tk2rush90 a workaround would be to inject Injector inside your modal service, and use that as the base of the Injector.create call when you create the injector for whatever modal component is being displayed.

0reactions

angular-automatic-lock-bot[bot]commented, Mar 11, 2022

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Top Results From Across the Web

angular - Renderer cannot be used in Service?

You cannot inject Renderer2 , but we can run RendererFactory2 to get Renderer2 instance inside @Injectable() service. There are two different ways of...

How to Use Renderer2 in Angular 14 Application

Renderer2 helps you manipulate the elements of your app in Angular. In this guide, we will show you how you can use Renderer...

Renderer2

Create your custom renderer using RendererFactory2 . Use a custom renderer to bypass Angular's templating and make custom UI changes that can't be...

Renderer2 should be avoided? : r/Angular2

If you're trying to teach yourself how to use Renderer2, ... The above code doesn't require Dependency Injection (Renderer2 does) and with ...

Four ways of listening to DOM events in Angular (Part 3

However, we cannot accomplish that with event bindings as they are inlined ... Hence, we need to use Renderer2.listen which allows us to...