Questions tagged [angular-dependency-injection]

Use this tag if your question is specially about the behavior of the angular dependency injection framework.

Dependency injection (DI), is an important application design pattern. Angular has its own DI framework, which is typically used in the design of Angular applications to increase their efficiency and modularity.

Dependencies are services or objects that a class needs to perform its function. DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself.

In Angular, the DI framework provides declared dependencies to a class when that class is instantiated. This guide explains how DI works in Angular, and how you use it to make your apps flexible, efficient, and robust, as well as testable and maintainable.

For more information about angular DI visit the official documentation

107 questions
70
votes
3 answers

APP_INITIALIZER raises "Cannot instantiate cyclic dependency! ApplicationRef_" when used with a custom Http provider that is redirecting

I am using a custom Http provider to handle API authentication error. In my CustomHttp, I need to redirect the user to the login page when a 401 status error is emitted by the API. That works fine! app.module.ts export function…
Anne Lacan
  • 753
  • 1
  • 5
  • 8
23
votes
13 answers

This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid

In my Angular 9 app, I have an abstract class: export abstract class MyAbstractComponent { constructor( protected readonly cd: ChangeDetectorRef, ) { super(); } // ... } and a Component extending it: @Component({ // ... }) export…
22
votes
3 answers

What is the difference between providedIn any and root

In Angular 9 the injectable decorator option providedIn has a new value called any. What is the difference between root and any? Is a service considered a singleton in the case that I use any? @Injectable({providedIn: 'any'}) class UsefulService…
18
votes
2 answers

Angular 6. Is it possible to inject service by condition?

In my angular app (with the angular material) I have a filter panel and I want besides select to be able to make autocomplete (user input value and it sends to the back-end, whereby $regexp query we find the match in MongoDB collection). But to do…
Alex Bryanskiy
  • 395
  • 1
  • 3
  • 19
15
votes
3 answers

Override Angular providers provided in root

I import a modal library of ng-bootstrap in a lazy module. @NgModule({imports: [NgbModalModule]}) This library has a NgbModal service provided in root. @Injectable({providedIn: 'root'}) class NgbModal {...} I inject it into a…
Serginho
  • 7,291
  • 2
  • 27
  • 52
13
votes
2 answers

How to inject a service into a constant in angular

I'm trying to export a constant in angular and I need to set a key whose value will be returned from a service. I tried with following code: This is my user-config.ts file: export const USER_CONFIG = { username: new…
Kedar Udupa
  • 544
  • 9
  • 27
13
votes
4 answers

Angular: Metadata collected contains an error that will be reported at runtime: Lambda not supported

In my Angular app, I'm trying to use a factory provider in my module: export function getMyFactory(): () => Window { return () => window; } @NgModule({ providers: [ { provide: WindowRef, useFactory: getMyFactory() }, ], }) export class…
9
votes
1 answer

Inject a service from a main project into a created library

I working with Angular 8. This question is only for Angular DI experts. At first, I made an Angular library that will be reused in many project. In this Library, I made an abstract service, that have to be defined in the project using it. I defined…
7
votes
6 answers

Angular - Dependency injection through @Input property

Is it a good practice to inject 'service' dependencies in @Input properties? The service in this context is not a singleton instance managed at the root level but multiple instances of different implementations of the interface. Consider the…
7
votes
2 answers

Pass configuration data to a dependency of a angular library using "forRoot"

I've created two Angular libraries, one has the other as a dependency. the dependency needs to be configured using the forRoot method. how can i pass the configuration data from the parent library to it's dependency? for example, let's say we have…
Roip
  • 81
  • 2
  • 6
6
votes
0 answers

How to set config (or useValue) for imported modules from a component?

We're well aware that there are various ways of setting config for imported modules. We have '.forRoot()', 'useValue', 'useClass' and such to be used in the importing module. Say for example, we want to use ng2-currency-mask. Taking directly from…
6
votes
1 answer

The semantics of @Injectable(providedIn: 'root')?

Just want to make sure I understand the semantics of @Injectable(providedIn: 'root'). Prior to Angular 6 if we import a module from NPM that contains a service we would declare that module in our app module such that the entire application has…
5
votes
2 answers

Cannot resolve parameters for ApplicationModule: (?)

Pretty new to Angular. My app contains 1 service and 3 components. Compiled successfully. I'm getting this error and have no idea what went wrong: Uncaught Error: Can't resolve all parameters for ApplicationModule: (?). Debugging gave me very…
gioravered
  • 1,758
  • 3
  • 19
  • 30
4
votes
1 answer

NG0200: Circular dependency in DI detected for ApplicationRef

I got the following error while refactoring the app: main.ts:21 Error: NG0200: Circular dependency in DI detected for ApplicationRef. Find more at https://angular.io/errors/NG0200 at throwCyclicDependencyError (core.js:216) at…
Daniel Kucal
  • 8,684
  • 6
  • 39
  • 64
4
votes
0 answers

How to change provider useValue on runtime in Angular?

The Entry Point for my application is like www.mywebsite.com/context/token I have a Provider in AppModule which I use as a base path for all API calls : { provide: API_ENPOINT_BASE_PATH, useValue: 'rest/apis' } My Requirement is to read the token…
1
2 3 4 5 6 7 8