Does the Angular resolver not update or redirect data even though runGuardsAndResolvers is set to always?

Question

I have an Angular route set listing entities with two child routes for creating such an object and editing an existing object. The list of objects has attached to it resolverfor preliminary selection of data for the component before displaying it. These routes can be summarized as follows, see below how these routes are described in code.

• index: /items
• create: /items/create
• Edit: /items/:itemId/edit

However, if I am in /items/createand successfully creating an element, going back to /itemseither any editing route or even back to /will not cause my converter to receive updated data, such as I would expect. This is despite the fact that the property is runGuardsAndResolversset to always . My understanding is that this property should include the functionality I'm looking for.

Why is this and how can I enable the functionality I'm looking for without doing something like subscribing to router events in my component and duplicate logic.

Routes

const itemRoutes: Routes = [
    {
        path: '', // nb: this is a lazily loaded module that is itself a child of a parent, the _actual_ path for this is `/items`. 
        runGuardsAndResolvers: 'always',
        component: ItemsComponent,
        data: {
            breadcrumb: 'Items'
        },
        resolve: {
            items: ItemsResolver
        },
        children: [
            {
                path: 'create',
                component: CreateItemComponent,
                data: {
                    breadcrumb: 'Create Item'
                }
            },
            {
                path: ':itemId/edit',
                component: EditOrArchiveItemComponent,
                data: {
                    breadcrumb: 'Editing Item :item.name'
                },
                resolve: {
                    item: ItemResolver
                }
            }
        ]
    }
];

ItemsResolver

@Injectable()
export class ItemsResolver implements Resolve<ItemInIndex[]> {
    public constructor(public itemsHttpService: ItemsHttpService, private router: Router) {}

    public resolve(ars: ActivatedRouteSnapshot, rss: RouterStateSnapshot): Observable<ItemInIndex[]> {
        return this.itemsHttpService.index().take(1).map(items => {
            if (items) {
                return items;
            } else {
                this.router.navigate(['/']);
                return null;
            }
        });
    }
}

ItemsHttpService

(Posting on request)

@Injectable()
export class ItemsHttpService  {

    public constructor(private apollo: Apollo) {}

    public index(): Observable<ItemInIndex[]> {
        const itemsQuery = gql`
            query ItemsQuery {
                items {
                    id,
                    name
                }
            }
            `;

        return this.apollo.query<any>({
            query: itemsQuery
        }).pipe(
            map(result => result.data.items)
        );
    }
}

Answer 1

.

, Resolver.

Resolver , , . , Resolver , , , , .

Item .

/

/items, , , . , Resolver , . , resolver api, ItemsComponent.

.

ItemsComponent. , , css, , Service api. , , - (-bar) , .

//

. , Resolver api, CreateComponent. , . Resolver

//: Itemid/

Resolver. , . Resolver , , .

ItemsResolver .

const routes: Routes = [
  {
      path: '',
      component: ItemsComponent,
      children: [
        {
          path: '',
          component: ItemsListComponent,
          data: {
            breadcrumb: 'Items'
          },
        },
        {
          path: 'create',
          component: CreateItemComponent,
          data: {
            breadcrumb: 'Create Item'
          },
        },
        {
          path: ':itemId/edit',
          component: EditOrArchiveItemComponent,
          data: {
            breadcrumb: 'Editing Item :item.name'
          },
          resolve: {
            item: ItemResolverService
          }
        }
      ]
  }
];

BehaviorSubject ItemsService, , . , ItemsComponent, , .

App: https://stackblitz.com/github/SplitterAlex/stackoverflow-48640721

A Resolver .

Resolver !

Answer 2

, , Angular, , :

• :

routing.module.ts

path: '/items/create', canActivate: [AuthGuard]...

AuthGuard URL-... .

file.guards.ts

// Imported at providers on your app.module.ts file

export class AuthGuard implements CanActivate {

  constructor(){ }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): any {
     // create a function which returns boolean
     // allow your access to this url
  }
}