bug(mat-tab-group): When component is present it hides errors

[rsi21]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16

Description

Hello,

I noticed that in some of our internal components, an NG0100 error was raised all the times, in Angular 16.
Now that we migrate to Angular 19, we noticed that the error was not showing anymore in the console.
But it was stil raised in unit test like before.

After some research we discovered that it was not shown in browser console anymore when the component mat-tab-group was present in the page.

We noticed the same behavior in Angular 18 & 19.

Reproduction

Sample project link: https://stackblitz.com/edit/components-issue-starter-ptyvp9bg?file=src%2Fapp.config.ts
Steps to reproduce:

1. Run the app with ng serve
2. Click on "Simple" button for a page throwing a NG0100 in browser console
3. Click on "tab group" button for the same simple page but also containing a simple mat-tab-group, NG0100 is not shown in console anymore

Expected Behavior

In development mode, see NG0100 in console.

Actual Behavior

NG0100 is not shown in dev mode when mat-tab-group is present in the page.

Environment

• Angular: 19
• CDK/Material: 19
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

This is most likely a framework issue. Moving to the appropriate repo.

[pkozlowski-opensource]

We will need a minimal reproduction in stackblitz to be able to investigate.

[rsi21]

Hi @pkozlowski-opensource,

I updated the description, adding a stackblitz project instead of my repo.

[JeanMeche]

I was able to narrow down a repro :

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
  <div [attr.id]="testId">Tab Group in page - NG0100 not showed in console</div>
 `,
})
export class AppComponent {
  title = 'temp-project';
  inj = inject(Injector)
  cdr = inject(ChangeDetectorRef);

  testId: string = 'first value';

  ngAfterViewInit(): void {
    this.testId = 'second value';

    afterNextRender(() => {
      this.cdr.markForCheck();
    }, {injector: this.inj})
  }
}

A component nested inside a mat-tab-group was doing a markForCheck inside an afterNextRender.

Basically scheduling a round of CD after CD which prevent the error from being raised.

The behavior you observed is expected in this situation.

[rsi21]

Hi @JeanMeche,

Thanks for the explanation, i think i get the point about the mat-tab-group.

But just to clarify, when you say 'component nested inside a mat-tab-group', you mean a child of mat-tab-group ? Because in my case it was out of the mat-tag-group (before it).
Also we noticed that issue, with unit tests, karma is now failing with NG0100 error and it was not visible at browser level. That's why we tried to understand what change happens since Angular 16...

Thanks

[JeanMeche]

Yeah it's in the implementation of the mat-tab-group (mat-tab-header which isn't public).