ResolverFn in Angula 17

idk what is happening, but call a function in the ResolveFn and it calls that the method is not a function

Resolver

import { of } from 'rxjs';
import { Inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { Livro } from '../models/livro';
import { LivrosService } from '../services/livros.service';

export const livrosResolver: ResolveFn<Livro> = (route, state) => {

if(route.params?.['id']){
return Inject(LivrosService).loadById(route.params['id'])
}

return of({_id: Number(null), name: '', desc: ''});
};


Services

import { Livro } from './../models/livro';
import { tap, first } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';


@Injectable({
providedIn: 'root'
})
export class LivrosService {

private readonly API = 'api/livros'

constructor(
private httpClient: HttpClient,

) {
}

list(){
return this.httpClient.get<Livro[]>(this.API)
.pipe(
first(),
tap(formulas => console.log(formulas))
)
}

loadById(id: number){
return this.httpClient.get<Livro>(`${this.API}/${id}`)
}

save(livro: Partial<Livro>){
return this.httpClient.post<Livro>(this.API, livro);
}


}


Model

export interface Livro {
_id: number;
name: string;
desc: string;
}


Routing Module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LivrosComponent } from './containers/livros/livros.component';
import { LivroFormComponent } from './containers/livro-form/livro-form.component';
import { livrosResolver } from './guards/livros.resolver';


const routes: Routes = [
{ path: '', component: LivrosComponent},
{ path: 'new', component: LivroFormComponent, resolve: {livro:livrosResolver}},
{ path: 'edit/:id', component: LivroFormComponent, resolve: {livro:livrosResolver}}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LivrosRoutingModule { }



Component

import { Component, OnInit } from '@angular/core';
import { LivrosService } from '../../services/livros.service';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { MatDialog } from '@angular/material/dialog';
import { ErrorDialogComponent } from '../../../shared/components/error-dialog/error-dialog.component';
import { Livro } from '../../models/livro';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
selector: 'app-livros',
templateUrl: './livros.component.html',
styleUrl: './livros.component.scss'
})
export class LivrosComponent {

livros$: Observable<Livro[]>

constructor(
private livrosServices: LivrosService,
public dialog: MatDialog,
private router: Router,
private route: ActivatedRoute

)

{
this.livros$ = this.livrosServices.list()
.pipe(
catchError(error =>{
this.onError('Erro ao carregar as Fórmulas')
return of([])
})
)
}

onError(errorMsg: string) {
this.dialog.open(ErrorDialogComponent, {
data: errorMsg
});
}


onAdd(){
this.router.navigate(['new'], {relativeTo: this.route})
}

onEdit(livro: Livro){

this.router.navigate(['edit', livro._id], {relativeTo: this.route})
}


}



The Error

ERROR TypeError: Inject(...).loadById is not a function
at livrosResolver (livros.resolver.ts:10:34)
at resolve_data.ts:109:42
at R3Injector.runInContext (r3_injector.ts:235:14)
at getResolver (resolve_data.ts:109:23)
at resolve_data.ts:92:18
at doInnerSub (mergeInternals.ts:71:15)
at outerNext (mergeInternals.ts:53:58)
at OperatorSubscriber2._this._next (OperatorSubscriber.ts:70:13)
at Subscriber2.next (Subscriber.ts:75:12)
at Observable2._subscribe (innerFrom.ts:78:18)


For me using a resolver is a better method to get this data from the Server. But i don't know why this won't work, i do what they explain in the documentation and simply don't work

Continue reading...