Skip to content

bug(dialog): @angular/animations package still required to use MatDialogHarness #31145

Closed
@MikaStark

Description

@MikaStark

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

No response

Description

Hi Angular Team !
I started a new project using Angular 20 RC (next) version which by default doesn't install the @angular/animations package (which is fine as I don't rely on it anymore). I implemented a simple dialog feature using MatDialog. Everything works just fine but when I try to write unit tests, I get this terminal error :

Application bundle generation failed. [0.132 seconds]

X [ERROR] Could not resolve "@angular/animations/browser"

    node_modules/@angular/platform-browser/fesm2022/animations.mjs:10:20:
      10 │ import * as i1 from '@angular/animations/browser';~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@angular/animations/browser" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

After some debug, I found the cause : MatDialogHarness. But still I cannot figure why and what can I do to solve this problem without adding @angular/animations

Reproduction

Steps to reproduce:

  1. Generate a new project using @angular/cli@next
  2. Verify in package.json that @angular/animations is not there
  3. replace app.spec.ts with the following code and run tests :
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { provideZonelessChangeDetection } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { MATERIAL_ANIMATIONS } from '@angular/material/core';
import { MatDialogHarness } from '@angular/material/dialog/testing';
import { App } from './app';

describe('App', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [App],
      providers: [
        provideZonelessChangeDetection(),
        {
          provide: MATERIAL_ANIMATIONS,
          useValue: { animationsDisabled: true },
        },
      ],
    }).compileComponents();
  });

  it('should not open dialog', async () => {
    const fixture = TestBed.createComponent(App);
    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
    const dialog = await loader.getHarnessOrNull(MatDialogHarness);
    expect(dialog).toBeNull();
  });
});

Expected Behavior

MatDialogHarness shouldn't cause crash when running tests while not having @angular/animations installed

Actual Behavior

Crash

Environment

  • Angular: 20.0.0-rc.2
  • CDK/Material: 20.0.0-rc.2
  • Browser(s): Chrome (latest)
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/dialog

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions