Angular resolver is not working. Route never subscribes to the observable returned

Question

I am trying to add a resolver to a route of my angular application.

Following is the resolver.

@Injectable()
export class ItemsResolver implements Resolve<Item[]> {
    constructor(private itemService: ItemsService) {
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Item[]> {
        return this.itemService.getAll().pipe(first());
    }
}

Following is the getAll() method in itemService, which the resolver calls to get the observable.

public getAll(): Observable<Item[]> {
    console.log('get all called');
    return new Observable<Item[]>(subscriber => {
        console.log('new subscription for items observable');
        this.db.list<Item>('items')
            .valueChanges()
            .subscribe(entities => {
                const items: Item[] = entities.map(entity => entity != null ? new Item(entity) : null);
                ItemsService.setInstances(items);
                subscriber.next(items);
            }, error => subscriber.error(error));
    });
}

Following is the route definition which uses this resolver.

        {
            path: 'edititem/:id', component: EditItemComponent, data: {title: 'Edit Item', type: 'edit'}, resolve: {
                items: ItemsResolver
            }
        }

When user navigates to the route, app hangs and the navigation doesn't complete. It can be seen that only get all called is logged in the console and new subscription for items observable is not logged. So, it looks like the route doesn't subscribe for the observable returned by the resolver.

What could be the reason for this? How can I troubleshoot this further?

Edit

If I returned a promise instead of an observable, it works properly.

@Injectable()
export class ItemsResolver implements Resolve<Item[]> {
    constructor(private itemService: ItemsService) {
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Item[]> {
        return new Promise<Item[]>((resolve, reject) => this.itemService.getAll().pipe(first()).subscribe(value => resolve(value), error => reject(error)));
    }
}

You have two closing parentheses in `this.db.list('items'))` — Reactgular, Jul 26 '18 at 01:05
You can drop the `pipe(first())` if you call `subscriber.complete()` — Reactgular, Jul 26 '18 at 01:06
@cgTag Removed the additional parentheses. It was a mistake I made when copying the code to the question. — Lahiru Chandima, Jul 26 '18 at 01:17
@cgTag, called `subscriber.complete()` inside `getAll()` method,and dropped `pipe(first())`. Still doesn't work. — Lahiru Chandima, Jul 26 '18 at 01:20
@cgTag If I return a promise instead of an observable, it works properly. Any idea why? — Lahiru Chandima, Jul 26 '18 at 14:20
Does it still hang if you comment out the `this.db.list('items')` so that the observable just has a console.log. You can call `subscriber.complete()` right away. — Reactgular, Jul 26 '18 at 15:38

score 1 · Accepted Answer · answered Jul 26 '18 at 15:42

Found the issue. I had imported Observable as follows (both in item service and resolver).

import {Observable} from "rxjs/index";

When I changed it to following, it started to work.

import {Observable} from "rxjs";

The first import was added by Intellij IDEA. Observable was working fine, except for the resolver. It is not clear what is the difference between the two imports.

score 0 · Answer 2 · answered Jul 26 '18 at 14:47

You need to use the Observable.create operator to create custom observables.

public getAll(): Observable<Item[]> {
    console.log('get all called');
    return create<Item[]>(subscriber => {
        console.log('new subscription for items observable');
        this.db.list<Item>('items')
            .valueChanges()
            .subscribe(entities => {
                const items: Item[] = entities.map(entity => entity != null ? new Item(entity) : null);
                ItemsService.setInstances(items);
                subscriber.next(items);
            }, error => subscriber.error(error));
    });
}

Angular resolver is not working. Route never subscribes to the observable returned

2 Answers2