Маршруты Angular 7 с резольверами не загружают компоненты

Question

У меня проблема с Angular 7, когда не загружаются дочерние компоненты модуля с определителем на маршруте.

app-routing.module.ts

{
  path: 'Account',
  loadChildren: './account/account.module#AccountModule'
}

account-routing.module.ts

{
  path: 'Profile',
  component: ProfileComponent,
  resolve: {
    profile: ProfileResolver
  }
}

profile.resolver.ts

@Injectable()
export class ProfileResolver implements Resolve<Profile> {

  constructor(private readonly accountService: AccountService) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Profile> {
    return this.accountService.profile();
  }
}

profile.component.ts

@Component({
⋮
})
export class ProfileComponent implements OnInit {

  model: Profile;

  constructor(private readonly route: ActivatedRoute) {
  }

  ngOnInit(): void {
    this.model = this.route.snapshot.data['profile'] as Profile;
  }
}

account.service.ts

@Injectable()
export class AccountService {

  constructor(protected readonly http: HttpClient) {
  }

  profile(): Observable<Profile> {
    return this.http.get<Profile>(`${environment.apiUrl}/Account/Profile`);
  }
}

Поведение таково, что при переходе к /Account/Profile,ProfileResolver вызывается, попадает на сервер и получает ответ 200 с объектом Profile (я вижу его на вкладке Сеть), а затем ... ничего.Не вызывается ни constructor, ни ngOnInit метод ProfileComponent.

Если я удаляю ProfileResolver из AccountRoutingModule и вызываю AccountService непосредственно из ngOnInit метода,оно работает.Но существует несколько ошибок синтаксического анализа шаблона, пока он ожидает ответа (именно по этой причине я хочу использовать resolve).

Есть ли что-то дополнительное, что мне нужно сделать, чтобы сделатьРабота распознавателя с этими модулями?

Это также может быть той же проблемой, как описано здесь: Угловой маршрутизатор не загружает компонент с преобразователем

ОБНОВЛЕНИЕ : я включил enableTracing, чтобы я мог видеть, что происходит.Вот вывод:

Router Event: NavigationStart
NavigationStart(id: 2, url: '/Account/Profile')
NavigationStart {id: 2, url: "/Account/Profile", navigationTrigger: "imperative", restoredState: null}

Router Event: RoutesRecognized
RoutesRecognized(id: 2, url: '/Account/Profile', urlAfterRedirects: '/Account/Profile', state: Route(url:'', path:'') { Route(url:'Account', path:'Account') { Route(url:'Profile', path:'Profile') }  } )
RoutesRecognized {id: 2, url: "/Account/Profile", urlAfterRedirects: "/Account/Profile", state: RouterStateSnapshot}

Router Event: GuardsCheckStart
GuardsCheckStart(id: 2, url: '/Account/Profile', urlAfterRedirects: '/Account/Profile', state: Route(url:'', path:'') { Route(url:'Account', path:'Account') { Route(url:'Profile', path:'Profile') }  } )
GuardsCheckStart {id: 2, url: "/Account/Profile", urlAfterRedirects: "/Account/Profile", state: RouterStateSnapshot}

Router Event: ChildActivationStart
ChildActivationStart(path: '')
ChildActivationStart {snapshot: ActivatedRouteSnapshot}

Router Event: ActivationStart
ActivationStart(path: 'Profile')
ActivationStart {snapshot: ActivatedRouteSnapshot}

Router Event: GuardsCheckEnd
GuardsCheckEnd(id: 2, url: '/Account/Profile', urlAfterRedirects: '/Account/Profile', state: Route(url:'', path:'') { Route(url:'Account', path:'Account') { Route(url:'Profile', path:'Profile') }  } , shouldActivate: true)
GuardsCheckEnd {id: 2, url: "/Account/Profile", urlAfterRedirects: "/Account/Profile", state: RouterStateSnapshot, shouldActivate: true}

Router Event: ResolveStart
ResolveStart(id: 2, url: '/Account/Profile', urlAfterRedirects: '/Account/Profile', state: Route(url:'', path:'') { Route(url:'Account', path:'Account') { Route(url:'Profile', path:'Profile') }  } )
ResolveStart {id: 2, url: "/Account/Profile", urlAfterRedirects: "/Account/Profile", state: RouterStateSnapshot}

Таким образом, похоже, что событие ResolveEnd никогда не запускается.Я обнаружил эту проблему: ActivatedRoute маршрутизатора data возвращает пустое {}, если модуль ленивый .Кажется, что это может быть связано, но я не уверен, как бы я реализовал это исправление здесь.

Answer 1

Я снова обратился к руководству Маршрутизация и навигация и изменил свой резольвер, чтобы он выглядел так, как там:

profile.resolver.ts

@Injectable()
export class ProfileResolver implements Resolve<Profile> {

  constructor(private readonly accountService: AccountService) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Profile> {
    return this.accountService.profile().pipe(
      take(1),
      map((profile: Profile) => profile));
  }
}

Ключом было добавление take(1).Без этого событие ResolveEnd никогда не запускается, а Router просто зависает.

Answer 2

Я думаю, что вы должны подписаться на обещание решателя

@Component({
⋮
})
export class ProfileComponent implements OnInit {

  model: Profile;

  constructor(private readonly route: ActivatedRoute) {
  }

  ngOnInit(): void {

    this.router.data.subscribe( (data) => { <== here 
      this.model = data as Profile  <== here
    });
  }
}