rangle / augury

Angular Debugging and Visualization Tools
https://augury.rangle.io
MIT License
2.01k stars 216 forks source link

Components doesn't appear or got duplicated when within a list #1494

Open Hydhen opened 3 years ago

Hydhen commented 3 years ago

Couldn't download Augury Canary, link leads to a 404

Augury version (required): 1.25.2 Angular version (required): 9.1 Date: 2020/09/11 OS: Windows 10 19041.508

Description of issue:

Components within a material tab aren't shown or the component is duplicated by switching tab and its seems to be the same reference, when one selected, all of them are, same for its children

I could one reproduce the missing components, the duplication leads me to a crash of Augury, I clicked on send a report but Augury restarded so I don't know if the report was sent or not

Steps to reproduce:

  1. With Angular Material create a TabGroup
  2. Create 2 or 3 components
  3. Inject components through directive with a component factory by iterating over each tabs
  4. Open Augury and go to the component level of your tab
  5. Try to switch between your tabs

Additional details:

In my case I have a set of tabGroup like so:

tabGroup = [
    { componentName: TestingThirdComponent },
    { componentName: TestingFourthComponent }
]

Which works correctly, both of my component are alive and got triggered when i fire up some events

Here's how I instantiate my components :

<ng-template appContentMarker></ng-template>

createInjector(data: any): Injector {
    return ReflectiveInjector.resolveAndCreate([
      {
        provide: 'data',
        useValue: data,
      }
    ]);
}

generateInnerComponent(marker: ContentMarkerDirective, tabData: MatTabData): void {
    const viewContainerRef = marker.viewContainerRef;
    if (!viewContainerRef) throw new Error('[MatTabComponent] No container ref found');

    const injector = this.createInjector(tabData.data);
    let componentFactory;

    const type = this.tabGroupService.getComponentType(tabData.componentName);

    componentFactory = this.componentFactoryResolver.resolveComponentFactory<GenericComponent>(type);

    const componentRef = viewContainerRef.createComponent<GenericComponent>(componentFactory, 0, injector);

    ...
}

And here is the result I got inside Augury with ComponentOnly view:

image

Extra question:

Is it possible to reload Augury at any moment to force a "website parsing" ?