Skip to content
This repository has been archived by the owner on May 25, 2021. It is now read-only.

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

Open
Hydhen opened this issue Nov 9, 2020 · 0 comments
Open

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

Hydhen opened this issue Nov 9, 2020 · 0 comments

Comments

@Hydhen
Copy link

Hydhen commented Nov 9, 2020

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" ?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant