0

I think this is something I am doing wrong, but I don't know what. I want routing in my Angular web component, and I can get routing to work. However the components used in the routing outlet don't work correctly if I use a resolver. The Events aren't firing!

Or at least... They fire if you navigate to this route from another route in the application, for example, going from myWebsite.com/#/ to myWebsite.com/#/myRoute/myParameter works fine, the resolver gets the data and all the events fire as expected. However, if I press refresh while on this route or I try to paste the URL (myWebsite.com/#/myRoute/myParameter) directly into a new tab/browser the component renders, the constructor is called, but no events fire!

This only happens if I add a resolver. If i remove the resolver and add a console.log in each lifecycle event they all work every time! Is there something I can configure differently? Is this a bug?

Or is there a way I can get my data from an API which forces the events to wait, thus bypassing the need for a resolver. I need the data before the component tries to render as the form is dynamic - and all the form questions are coming from that API call. I've tried calling the service method in the ngOninit and constructor by subscribing to it, but it gets the data after all the events have fired and I just have a blank form.

Thanks!

user1506481
  • 119
  • 2
  • 6
  • can you tell me where you are using resolver AppComponent or Services?. if you are using resolver in services it is best practice to do and you have to add `resolver:{cres: yourResolverSrvice}` in your router. – Abhishek Dec 12 '18 at 13:39
  • If I get this right, your requirement is to build the form whenever your API response back? – benshabatnoam Dec 12 '18 at 14:20
  • It doesn't just seem to be the resolver unfortunately. It seems that change detection just doesn't work properly in angular elements. https://github.com/angular/angular/issues/24181 – user1506481 Dec 12 '18 at 15:25
  • @Abhishek The resolver is a standard injectable resolver, in the router I then added ,resolver {data: myResolver} as you've stated. I have instead decided to just subscribe to the obserable in the ngOnInit. This works, but it doesn't work if you refresh the page. For some reason the change detection breaks if you do this – user1506481 Dec 12 '18 at 15:29

1 Answers1

0

It turns out it is a bug in zone.js. Change detection doesn't work as expected. There is a fix, but it hasn't been released yet. In the mean time someone else has made an unofficial fix with this npm package...

elements-zone-strategy

It works like a charm!

Just chuck this in your app.module.ts

import { ElementZoneStrategyFactory } from 'elements-zone-strategy';

const strategyFactory = new ElementZoneStrategyFactory(HelloComponent, this.injector);
const helloElement = createCustomElement(HelloComponent, { injector: this.injector, strategyFactory });
customElements.define('my-hello', helloElement);
Ms.Tamil
  • 350
  • 1
  • 14
user1506481
  • 119
  • 2
  • 6