NestJS: UseGuards Doesn't Use Dependency Injection - Can't Override Guard - dependency-injection

Current behavior
The documentation states here that:
...we passed the RolesGuard type (instead of an instance), leaving responsibility for instantiation to the framework and enabling dependency injection.
So I'm expecting to "override" a guard with another, via the module's providers.
This doesn't work as expected.
Interestingly enough,
injecting the same service via the controller's constructor does yield the correct service, though.
Input Code
Simple: https://github.com/dima-gusyatiner/nestjs-guards-override/tree/only-app-module
With Another module, using exports: https://github.com/dima-gusyatiner/nestjs-guards-override/tree/master
Controller:
#Controller()
#UseGuards(AuthGuard)
Module:
#Module({
controllers: [AppController],
providers: [
{
provide: AuthGuard,
useClass: AuthOverrideGuard,
}
],
})
Expected behavior
I would expect AuthGuard to never even be constructed.
Instead, both classes are constructed, and AuthGuard is used as the guard.
Environment
- Nest version: 8.0.6
- Node version: 16.8.0
- Platform: Linux
Bug Report
I've also opened a ticket for this:
https://github.com/nestjs/nest/issues/8011
Question
Am I doing something wrong here, or is this a bug?
Anybody can suggest a workaround?

I am not sure I understand it that well either but from what I saw:
With UseGuards, the passed in class is not resolved as provider. Only when you declare the guard as a dependency. Just like in AppController, is it looked up in the provider scope.
Sure the guard's dependencies are resolved as providers within the calling module's scope but it itself is not. Just regular instantiation with dependency injection.
I think that is why both guards are still created, just that AuthOverrideGuard, is registered as a provider.
That is why you get the following output:
[Nest] 77074 - 05/09/2021, 05:01:39 LOG [NestFactory] Starting Nest application...
Construct AuthOverrideGuard
Construct AuthGuard
AuthGuard
AppController AuthOverrideGuard {}
This is why this.guard is correctly resolved as AuthOverrideGuard from the provider scope

To summarize, in my understanding, the docs are inaccurate.
The documentation states here that:
...we passed the RolesGuard type (instead of an instance), leaving responsibility for instantiation to the framework and enabling dependency injection.
This is inaccurate, since RolesGuard won't be instantiated with proper dependency injection. Instead, it will be instantiated using this exact class only.
To achieve proper dependency injection, one should use another class, injected via the guard's constructor. For example:
import { CanActivate, ExecutionContext, Injectable } from '#nestjs/common';
import { Observable } from 'rxjs';
import { AuthService } from '../services';
#Injectable()
export class AuthGuard implements CanActivate {
constructor(
private readonly auth: AuthService,
) {}
canActivate(context: ExecutionContext) {
return this.auth.canActivate(context);
}
}
You can never provide another AuthGuard, it won't work. But you can provide another AuthService, which this guard uses.
#Module({
controllers: [AppController],
providers: [
{
provide: AuthService,
useClass: AuthServiceOverride,
}
],
})

Related

Service Dependencies in NestJS

I have many endpoints in my app:
/Route1
/Route2
...
/Route99
In a number of these routes, there is some common functionality such as getting specific data from one source such as a local file, or another resource such as a No SQL database or external HTTP endpoint. My problem is that these services need to have a service dependency themselves, and I am not sure that how I have currently done it is the best way to do it in NestJS.
Route1Service - Read a file of data, and return it. This uses the FileSystemService() to wrap all the error handling, different data types, path checking etc., of the NodeJS fs module. The Route1Service then returns this to the Route1Controller
#Injectable()
export class Route1Service {
private FS_:FileSystemService; // defined here instead of constructor, as I do not know how to set it in the constructor via NestJS, or if this is even the best way.
// constructor(private FS_: FileSystemService) { }
// Since I do not set it in the constructor
public DataServiceDI(FsService:FileSystemService):void {
this.FS_ = FsService;
}
public GetData(): string {
const Data:string = this.FS_.ReadLocalFile('a.txt');
return Data;
}
}
Route99Service might do the same thing, but with a different file (b.txt)
#Injectable()
export class Route99Service {
private FS_:FileSystemService;
public DataServiceDI(FsService:FileSystemService):void {
this.FS_ = FsService;
}
public GetData(): string {
const Data:string = this.FS_.ReadLocalFile('b.txt');
return Data;
}
}
This is a contrived example to illustrate my issue. Obviously a basic RouteService could be used, and pass the file name, but I am trying to illustrate the dependent service. I do not know how to define the module(s) to use this dependent service or if I should be doing it this way.
What I have been doing for my definition:
#Module({
controllers: [Route1Controller],
providers: [Route1Service, FileSystemService],
})
export class Route1Module {}
The controller than has the constructor with both Services:
#Controller('route1')
export class Route1Controller
constructor(
private Route1_: Route1Service,
private FsSystem_: FileSystemService
) { }
Now that my controller has the FsSystem service as a separate entity, I need to add a method on my Route1Service, DataServiceDI(), to allow me to pass the FileSystemService as a reference. Then my service can use this service to access the file system.
My question comes down to, is this the best practice for this sort of thing? Ultimately, in my code, these services (FileSystemService, NoSqlService) extend a common service type, so that all my services can have this DataServiceDI() in then (they extend a base service with this definition).
Is this the best approach for longer term maintainability? Is there an easier way to simply inject the proper service into my Route1Service so it is injected by NestJS, and I do not have to do the DI each time?
The current method works for me to be able to simply test the service, since I can easily mock the FileSystemServie, NoSqlService, etc., and then inject the mock.

Possible to manual inject NgZone?

I'm trying to use Injector to inject my component/service but one of them requires NgZone as its dependency. From https://angular.io/api/core/Injector
export MyComponent{
constructor() {
const injector = Injector.create({
providers: [
{ provide: NgZone, deps: [ ] },
{ provide: MyService, deps: [ NgZone ] }
]
});
this.myService = injector.get(MyService);
}
}
Then in child class:
export MyOtherComponent extends MyComponent {
constructor() {
super();
}
public helloWorld() {
this.myService.stuff();
}
}
But I'm getting the following error:
ERROR Error: StaticInjectorError[MyService -> NgZone]:
NullInjectorError: No provider for NgZone!
at NullInjector.get (core.js:8896)
I tried with a dummy service that don't have anything in the constructor, and it worked.
Is there a way to provide NgZone manually through the deps like that?
Is there another way to get the "global" NgZone object (there should only be 1 instance of NgZone running right?)
MyService is also a downgraded service and is being used in both AngularJS and Angular7, not sure if that changes anything.
Edit: Reason I'm trying to do this, is because MyComponent is a component base class that will get extends upon and have many child class extending on that. If I could do it like this by manually injecting it internally, then I don't need to pass all those dependencies from the children. Imagine I have 6-7 dependencies and 30+ childrens, and lets say I need some new dependencies, I'd have to update every single one of them...
You could inject injector — it would be a single dependency. And all your children could then get what they need from this injector. Yes, you would need to provide that injector through your inheritance chain of super() calls, but at least it would be just one thing.
There's also this:
https://github.com/angular/angular/issues/16566#issuecomment-338188342
This comment states it is possible to use DI in abstract classes if you decorate them. As for NgZone instance — yes, I believe there must be only one and I also tried to get a hold of it once but couldn't come up with an elegant solution.
Guess I was brain dead last night. This morning after digging deeper, I think I've found a way to grab the global Zone and it seems to work (it triggered the change detection).
Since #waterplea also have the assumption that there should only be 1 instance of the NgZone, I decided to just look around in console and what do you know.
Then I tried to just pass the global Zone to it like this:
{ provide: NgZone, useValue: Zone },
And it gave me the error that this.ngZone.run is undefined. OK... digging deeper, oh hey, there is a root object in Zone and hey, look, a run function!
So I went and updated the code to this and it worked.
{ provide: NgZone, useValue: Zone.root },

Can I inject a service into CanActivate?

Unlike the other hooks, CanActivate is a function separated from the component.
import 'dart:async';
import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
#Component(selector: 'my-app', template: '<h1>Hello World!</h1>')
#CanActivate(someGuard)
class HelloComponent {}
FutureOr<bool> someGuard(ComponentInstruction next, ComponentInstruction prev) {
return true;
}
AFAIK, it is possible to intercept the root injector at bootstrap time and assign it to a global variable, so that I can access it anywhere. IMO, that sounds like a hack and I don't like it. Is there a proper way to inject a service in CanActivate hook?
Angulars DI only supports constructor injection. #CanActivate() is an annotation and therefore doesn't support DI.
There is a workaround though.
Create a variable in a library and import it
Injector injector;
assign the injector when the application is created
bootstrap(App, [
Auth,
HTTP_PROVIDERS,
ROUTER_PROVIDERS,
provide(LocationStrategy, useClass: HashLocationStrategy)
]).then((appRef: ComponentRef) => {
// store a reference to the application injector
injector = appRef.injector;
});
then you can import the library with the injector and access it from code someGuard()

Dependency Injection in Angular 2

I thought DI was implemented to allow use the same services over the application, and change them as needed. However this snippet (Angular 2.0.0-beta.0) refuses to work:
# boot.ts
import {ProjectService} from './project.service'
bootstrap(AppComponent, [ProjectService]);
# my.component.ts
export class MyComponent {
constructor(project: ProjectService) {
}
}
and with explicit service requirement it works:
# my.component.ts
import {ProjectService} from './project.service';
export class MyComponent {
constructor(project: ProjectService) {
}
}
The official doc is somewhat inconsistent, but has the same in the plunkr example:
# boot.ts
import {HeroesListComponent} from './heroes-list.component';
import {HeroesService} from './heroes.service';
bootstrap(HeroesListComponent, [HeroesService])
# heroes-list.component.ts
import {HeroesService} from './heroes.service';
Is this the intended way of DI usage? Why we have to import service in every class requiring it, and where are the benefits if we can't just describe the service once on boot?
This isn't really related to dependency injection. You can't use a class in TS that is not imported.
This line references a class and DI derives from the type what instance to inject.
constructor(project: ProjectService) {
If the type isn't specified by a concrete import, DI can't know which of all possible ProjectService classes should be used.
What you can do for example, is to request a type (ProjectService) and get a different implementation (subclass like MockProjectService or EnhancedProjectService,...)
bootstrap(HeroesListComponent, [provide(ProjectService useClass: MockProjectService)]);
this way DI would inject a MockProjectService for the following constructor
constructor(project: ProjectService) {

Angular2 Inject components into other components

I'm messing around with Angular2 and I'm wanting the ability to inject one component into another based on the bootstrapped bindings.
class HelloComponent {
name: string;
}
#Component({
selector: 'hello'
}
#View({
template: `<h3>Hello {{ name }}</h3>`
})
class HelloBobComponent extends HelloComponent {
constructor() {
this.name = 'Bob';
}
}
#Component({
selector: 'app'
}
#View({
directives: [HelloComponent]
template: `<h1>Welcome to my Angular2 app</h1>
<hello></hello>`
}
class AppComponent {
}
bootstrap(AppComponent, [
bind(HelloComponent).toClass(HelloBobComponent)
]);
Here I'm using HelloComponent as a token that I want Angular2's Injector to resolve HelloBobComponent. I'm doing this so that I can swap components in and out based on the current app configuration. The above example obviously doesn't work. Is this possible using one of the frameworks decorators? I haven't found an answer yet digging though blogs or the source.
edit: To clarify, how do I get the directives property on the View decorator to treat HelloComponent as a di token instead of a type.
This is currently not supported as of alpha37. The compiler resolves directives passed in the View decorator by either type or binding but does not look up from the parent injector.
For example:
#View({
url: '...',
directives: [
Directive1,
bind(Directive2).toClass(Directive2Impl),
]
})
The intention for the "directives" property here was only to prevent selector naming collision. Later bind support was added to aid in testing.
The only solution I can think of without editing the compiler function would be to maintain an external Injector and resolve types on component declaration.

Resources