How can I effectively implement this code without encountering an error?
"Property 'resolve' in type 'DocumentaryResolverService' is not assignable to the same property in base type 'Resolve'."
import { Documentary } from './../models/documentary.model';
import { DocumentaryService } from './documentary.service';
import { Injectable } from '@angular/core';
import {
Resolve,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from '@angular/router';
@Injectable({ providedIn: 'root' })
export class DocumentaryResolverService implements Resolve<Documentary> {
constructor(private documentaryService: DocumentaryService) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
let slug = route.params['slug'];
let documentary: Documentary;
return this.documentaryService.get(slug).subscribe(result => {
documentary = <Documentary> result;
return documentary;
});
}
}
When I adjust the code as follows, the error disappears. However, I would like to ensure that the subscription to the observable completes before returning the documentary.
import { Documentary } from './../models/documentary.model';
import { DocumentaryService } from './documentary.service';
import { Injectable } from '@angular/core';
import {
Resolve,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from '@angular/router';
@Injectable({ providedIn: 'root' })
export class DocumentaryResolverService implements Resolve<Documentary> {
constructor(private documentaryService: DocumentaryService) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
let slug = route.params['slug'];
let documentary: Documentary;
this.documentaryService.get(slug).subscribe(result => {
documentary = <Documentary> result;
});
return documentary;
}
}
Implementing async and await did not yield the desired outcome for me
import { Documentary } from './../models/documentary.model';
import { DocumentaryService } from './documentary.service';
import { Injectable } from '@angular/core';
import {
Resolve,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from '@angular/router';
@Injectable({ providedIn: 'root' })
export class DocumentaryResolverService implements Resolve<Documentary> {
constructor(private documentaryService: DocumentaryService) {}
async resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
let slug = route.params['slug'];
console.log(slug);
console.log("resolver");
let documentary: Documentary;
await this.documentaryService.get(slug).subscribe(result => {
return <Documentary> result;
});
return documentary;
}
}
The resolver function is invoked within this component:
import { DocumentaryService } from './../../../services/documentary.service';
import { Documentary } from './../../../models/documentary.model';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-admin-documentary-detail',
templateUrl: './admin-documentary-detail.component.html',
styleUrls: ['./admin-documentary-detail.component.css']
})
export class AdminDocumentaryDetailComponent implements OnInit, OnDestroy {
documentary: any;
slug: string;
documentarySubscription: Subscription;
constructor(
private documentaryService: DocumentaryService,
private route: ActivatedRoute,
private router: Router) { }
ngOnInit() {
this.route.data.subscribe(data => {
this.documentary = data;
console.log(this.route.data);
})
}
ngOnDestroy() {
this.documentarySubscription.unsubscribe();
}
}