Angular 14 standalone component with animations and Jasmin test

This issue has been created since 2022-09-07.

Which @angular/* package(s) are the source of the bug?

animations, platform-browser-dynamic

Is this a regression?

No

Description

I have created animated, standalone component like this:

import { animate, state, style, transition, trigger } from '@angular/animations';
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faChevronDown, faChevronUp, IconDefinition } from '@fortawesome/free-solid-svg-icons';

import { ButtonColor } from '../button/button.component';

@Component({
  selector: 'uic-expandable-section',
  imports: [FontAwesomeModule, BrowserAnimationsModule],
  templateUrl: './expandable-section.component.html',
  styleUrls: ['./expandable-section.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  animations: [
    trigger('openClose', [
      state(
        'open',
        style({
          height: '*',
          overflow: 'hidden',
          borderWidth: '1px',
        })
      ),
      state(
        'closed',
        style({
          height: '0',
          overflow: 'hidden',
          borderWidth: '0',
        })
      ),
      transition('open => closed', [animate('500ms ease-in')]),
      transition('closed => open', [animate('500ms ease-out')]),
    ]),
  ],
})
export class ExpandableSectionComponent {
  @Input() public toggleButtonColor: ButtonColor;
  @Input() public toggleButtonLabel: string;

  @HostBinding('class') public get hostClass(): Array<string> {
    return ['class.uic-expandable-section'];
  }

  public isOpen = false;

  public get toggleButtonIcon(): IconDefinition {
    return this.isOpen ? faChevronUp : faChevronDown;
  }

  public toggleExpandableSectionState(): void {
    this.isOpen = !this.isOpen;
  }
}

And here is my test for the component:

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ExpandableSectionComponent } from './expandable-section.component';

describe('ExpandableSectionComponent', () => {
  let fixture: ComponentFixture<ExpandableSectionComponent>;
  let component: ExpandableSectionComponent;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [FontAwesomeModule, NoopAnimationsModule, ExpandableSectionComponent],
    })

      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(ExpandableSectionComponent);
        component = fixture.componentInstance;
      });
  }));

  it('should create', () => {
    expect(component).toBeDefined();
  });
});

When I run my test I get an Error:

Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.2.1
Node: 16.13.1
Package Manager: npm 8.3.1 
OS: win32 x64

Angular: 14.2.0
... animations, common, compiler, compiler-cli, core, elements
... forms, platform-browser, platform-browser-dynamic, router

Anything else?

No response

AndrewKushnir wrote this answer on 2022-09-08

@p-rogulski you can use provideAnimations and provideNoopAnimations functions (and use the results in the providers array) instead of importing animation-related modules:

This should bring the necessary providers without bringing the BrowserModule, which would help avoid the issue.

p-rogulski wrote this answer on 2022-09-08

@AndrewKushnir But what if this component is a part of standalone components library?

If I understand corectly the provider can be use only in:

bootstrapApplication(RootComponent, { providers: [ provideAnimations() ] });

when the RootComponent exists?
In my case I have just one standalone component - main.ts file does not exists.

AndrewKushnir wrote this answer on 2022-09-08

You can also use the provideAnimations or provideNoopAnimations in the TestBed like this:

    TestBed.configureTestingModule({
      imports: [FontAwesomeModule, ExpandableSectionComponent],
      providers: [provideNoopAnimations()]
    });
More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-09-30
Star Count 84080
Watcher Count 3064
Fork Count 22235
Issue Count 1197

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
export to requirements.txt without freezing version 0 2020-02-10 2022-08-28
How to select individual components of a composite GAP 4 2021-07-06 2022-09-06
singer/sound not playing even after changing locale and resampler. 1 2022-08-04 2022-09-17
dperf 有没有加入https 协议支持的计划? 1 2022-09-08 2022-09-25
How does SIS choose features in Sid 1 2021-10-11 2022-09-09
How to install with pip? 1 2021-12-08 2022-09-28
Check version and publish core at main push 1 2022-01-23 2022-07-20
error when installing using command 0 2022-01-11 2022-09-28
Thanks for responding @bryanmacfarlane! 0 2021-12-30 2022-02-27
undo option not working 2 2022-06-28 2022-09-28
Ordering of vertices for wedges and pyramids 3 2021-10-19 2022-08-04
No links listed when using computer as sink 10 2021-11-17 2022-09-13
Replace pointer for a tensor that does not own data 1 2022-04-22 2022-09-28
keep and drop for strided views 0 2022-04-18 2022-09-28
[Document] Scaffold entropy 0 2021-07-11 2022-08-21
Indicate if a video is still hosted at the original URL 2 2020-12-14 2022-08-19
Enable typing vanilla ruby Struct 5 2022-04-07 2022-09-28
How to hide the location input box in the pop-up window where the schedule is created 2 2021-12-30 2022-09-17
display a short blskey and blskey index 3 2020-05-07 2022-06-26
firmware fails to build on 1.14.0 2 2021-02-16 2022-09-29
Where is the password section in depugnoruntime private app folder 11 2022-03-21 2022-03-27
resetStyle not working 1 2021-08-05 2022-09-13
Allow the Progress component to begin from a predefined angle ranging from 0 to 360 degrees 0 2021-12-23 2022-09-28
npm run storybook build error 3 2022-01-27 2022-09-07
Installer without Devkit doesn't detect existing MSYS2 installation from much older set up 4 2020-12-23 2022-09-01
Restore database from backrest to a bitnami postgres docker container image or official postgres docker container 4 2022-03-21 2022-07-21
RANDOM_BYTES function is not random 1 2022-08-26 2022-09-09
Screen rotates to Landscape, despite auto-rotate turned off (with solution) 1 2022-06-19 2022-09-16
Sender of thread message not vertically centered 2 2022-06-01 2022-09-09
NSIS runAfterFinish is ignored in 23.0.3 (breaks in electron-webpack-quick-start) 1 2022-06-13 2022-09-28
Channel Point Reward Button 2 2021-09-12 2022-09-17
Improve docs for cb_explore_adf to make it easier to use 2 2021-10-05 2022-09-22
`self.save_hyperparams()` + sending a list to `PLModel.__init__()` + using tensorboard doesn't doesn't work. 0 2021-12-11 2021-12-19
Projects generated with openapi generator do not build 8 2022-04-07 2022-09-28
Configured annotation has wrong retention 0 2022-04-08 2022-09-28
Published jars on maven.org have wrong arch for RIC ARM shared objects 2 2022-03-15 2022-09-21
Refactor TemplateBuilder in CloudStack/VSphere to avoid unintuitive behavior 0 2022-04-06 2022-08-12
1.3.3 version number not correct 0 2021-12-19 2022-09-13
Bump smmap from 3.0.5 to 4.0.0 1 2021-01-28 2022-09-12
com.hazelcast.jet.impl.connector.WriteFilePTest.stressTest_exactlyOnce_forceful 2 2021-10-13 2022-08-30
Brew install doesn't exist 1 2018-04-03 2022-08-03
Not tracking time, no errors in wakatime.log file #2 1 2021-11-10 2022-09-29
Order lost in `aws_iam_role` causing endless plan updates due to ordering of principals in `aws_iam_policy_document` 8 2021-12-17 2022-09-20
Event Subscription fails to create, but only intermittently 3 2021-12-17 2022-09-29
[Performance Tuning] The performance improvement of Apache pulsar has encountered a bottleneck. No matter how to modify the configuration parameters, the performance can not be effectively improved 5 2022-02-11 2022-08-13
outputLength and keying for blake2b digest 4 2021-11-22 2022-08-27
`stdio` of spawned `child_process` stops working after sometime 2 2021-11-21 2022-08-28
doc: How to run just the `.out` tests? 9 2021-11-22 2022-08-26
Is there a way to convert (or transfer weights from) CuDNNLSTM to TFLiteLSTMCell? 2 2022-08-12 2022-08-10
[PropertyInfo] Namespace use s 4 2021-12-02 2022-09-30