Angular Dependency Injection Error in Sandbox environment

[yanmariomenev]

trafficstars

🐛 bug report

Preflight Checklist

• [x] I have read the Contributing Guidelines for this project.
• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

We are encountering an error related to Angular's Dependency Injection in CodeSandbox (might be related to the following https://github.com/codesandbox/codesandbox-client/issues/8225)). The error message is as follows:

preview-protocol.js:72 RuntimeError: NG0202: This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.

Please check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.
    at NodeInjectorFactory.AppComponent_Factory [as factory] (ɵfac.js:1:1)

This error occurs when I try to inject dependencies (such as HttpClient or Angular Router) into services or components in CodeSandbox. The same code works as expected in local Angular 19 projects and on or in some competitor's environments, but fails in CodeSandbox with the above error.

How has this issue affected you? What are you trying to accomplish?

This issue is preventing users from using Angular services with dependency injection (e.g., HttpClient, Routing, and etc.) in CodeSandbox.

To Reproduce

Open the examples below and check the browser console for errors.

HttpClient injection - https://codesandbox.io/p/sandbox/wrqq6r Router injection - https://codesandbox.io/p/sandbox/6zgwrk?file=%2Fsrc%2Fapp%2Fabout.component.ts

Extra examples with different services: https://codesandbox.io/p/sandbox/7dqyvd?file=%2Fsrc%2Fapp%2Fapp.component.ts https://codesandbox.io/p/sandbox/admiring-wilson-qrz3pc?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A14%2C18

Working Project

I will also provide a working Angular 19 project with the setup from the first example.

a19-project.zip

A working example can be found in the documentation, where it runs the examples in an Angular environment and executes them on a development platform like CodeSandbox or alternatives.

Your Environment

Software	Name/Version
Сodesandbox	Sandbox
Browser	Chrome
Operating System	Mac