Asked  5 Months ago    Answers:  5   Viewed   63 times

In Angular 5, if I had AbstractClassService and ExtendedClassService that extends the abstract, I could do this in my NgModule's providers array:

  providers: [
    {provide: AbstractClassService, useClass: ExtendedClassService}
export class AppModule {}

This would allow me to switch ExtendedClassService with another for testing or whatever very easily. This can still be done with Angular 6, however there is the new providedIn option that can be set within the service itself to reduce bundle size:

@Injectable({providedIn: 'root'})
export class ExtendedClassService extends AbstractClassService {}

Is there a way for me to accomplish the same thing I had with Angular 5 while using the new providedIn? Something like this:

@Injectable({providedIn: 'root', provide: AbstractClassService})
export class ExtendedClassService extends AbstractClassService {}



I needed to do two things.

First, use implements instead of extends when creating the inheriting class and do not use the providedIn key there:

@Injectable() // removed providedIn
export class ExtendedClassService implements AbstractClassService {}

Second, add the provider instructions to the abstract class instead:

@Injectable({providedIn: 'root', useClass: ExtendedClassService})
export abstract class AbstractClassService {}

Other provider configuration (useValue, useExisting, useFactory) can also be used there.

Credit goes to Abinesh with this comment which led me to the linked blog post. Many thanks to the blog author!

Wednesday, July 28, 2021
answered 5 Months ago

On Angular 2.2.3:

export class MockElementRef extends ElementRef {}

Then in the test:

beforeEach(async(() => {
    providers: [
      //more providers
      { provide: ElementRef, useClass: MockElementRef }
Wednesday, August 11, 2021
answered 4 Months ago

This isn't an Angular dependencies problem.

The circular reference is generated by the TypeScript compiler when it tries to resolve the circular imports.

First Solution

Create a new module named ProtectedResolversModule and use providedIn: ProtectedResolversModule and move the resolvers there.

Now you can import that module into ProtectedModule and you won't get a circular dependency error when loading ProtectedRoutingModule.

Second Solution

Use the providers array of ProtectedModule.

Thursday, August 12, 2021
answered 4 Months ago

You could change the date into dd/mm/yyyy format using DatePipe inside the checkDate() function. like below. And send that date into the server side.

first import the DatePipe into your component

import { DatePipe } from '@angular/common';

then use it like below

  checkDate() {
    const dateSendingToServer = new DatePipe('en-US').transform(this.Students.dob, 'dd/MM/yyyy')

working example you could be found here on STACKBLITZ DEMO.

Hope this will help to you!

Monday, August 16, 2021
answered 4 Months ago

Renderer2 is just an abstraction. If you use Universal (server-side-rendering) or WebWorkers, there is no DOM available and code that accesses the DOM directly will just cause an exception.

If you use Renderer2, Angular can provide different implementations using its dependency injection functionality, to make your code use an implementation that is compatible with the platform the code is currently running on.

Renderer2 is quite limited, because all methods only allow to update the DOM, but none allows to read any information from the DOM. If you actually need to read you need to take special measures to make it work with Universal or WebWorker (for example check the current platform and skip the execution of code that directly accesses the DOM if it's not the browser platform, or use others provided by the current platform)

Monday, November 29, 2021
answered 5 Days ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :