Как добавить BrowserAnimationsModule или NoopAnimationsModule в автономный компонент?

Question

Проблема

Когда я добавляю a или a в массив импорта моего Standalone AppComponent, это ломает приложение.

      @Component({
  standalone: true,
  imports: [
    CommonModule,
    NoopAnimationsModule,
    /* ... */
  ],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

Вот ошибки, которые я получаю, когда добавляю любой из них:

      ERROR Error: Uncaught (in promise): 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.

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.

И когда я не добавляю его, я получаю эту ошибку:

      ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that:
 - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
 - There is corresponding configuration for the animation named `@transitionMessages` defined in
 the `animations` field of the `@Component` decorator (see
 https://angular.io/api/core/Component#animations).

Мои выводы на данный момент...

по-видимому BrowserAnimationsModuleа также NoopAnimationsModuleсодержать BrowserModule, и я предполагаю, что автономные компоненты тоже. Как я могу исключить Browsermoduleлибо из модуля анимации, либо из моего автономного компонента? Или есть какой-то другой анимационный модуль или решение, которое поможет мне с этой проблемой?

Вот Stackblitz , если вы хотите увидеть и попробовать сами.

Answer 1

Функция обеспечивает мост обратно в мир NgModule. Его не следует использовать в компоненте, поскольку его можно использовать только в инжекторе приложения.

Добавлять importProvidersFromдля предоставления BrowserAnimationModule внутри main.ts.

main.ts

      bootstrapApplication(AppComponent,{
  providers:[importProvidersFrom(BrowserAnimationsModule)]
}); 

Разветвленный пример

Answer 2

Только что узнал, что importProvidersFrom следует использовать только один раз.

Неправильный:

      bootstrapApplication(AppComponent,{
  providers:[
    importProvidersFrom(BrowserModule),
    importProvidersFrom(BrowserAnimationsModule),
  ]
}); 

Правильный:

      bootstrapApplication(AppComponent,{
  providers:[
    importProvidersFrom([BrowserModule, BrowserAnimationsModule])
  ]
}); 

Answer 3

Я столкнулся с той же проблемой. Я исправил это с помощью overrideComponent в моеми просто опуская Module.

      .overrideComponent(
    CourseComponent,
    // since you cannot simply ovveride services that have been injected into Angular Component's
    // providers https://angular.io/guide/testing-components-scenarios#override-component-providers
    {
      set: {
        providers: [
          { provide: CourseService, useValue: courseServiceMock },
        ],
        imports: [
          CommonModule,
          ReactiveFormsModule,
          // BrowserAnimationsModule, -- this cause error related to standalone components API therefore turned off
          MatButtonModule,
          MatInputModule,
          MatIconModule,
          MatDividerModule,
          MatCardModule,
        ],
      },
    }
  )