Angular 路由转换动画抛出错误（缺少模块）

Question

我试图在 Angular 中仅在一个组件中设置路由动画，但它引发了以下错误：
“core.js:6210 错误错误：找到合成的属性 @routeAnimations。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。“

我在app.module.ts中导入了动画模块如下：

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

然后我尝试删除所有代码以查看发生输入问题的位置。 returns 当我在 appComponent（在 div router-outlet 的父级）中添加动画时出现错误，当我添加数据对象（“{animation : name-animation}”）路由数组。
它没有运行动画，当我在搜索栏中插入字符串并按 Enter 时应该运行。
当我加载页面时，它显示页面已经被触发，当我在搜索栏中插入一个值时按 Enter 它应该是 returns 然后永远不会运行动画。只有在Route数组中插入数据对象时才会出现这种现象。

我已经尝试在过程中涉及的所有组件中实现动画模块。
我在那个组件中有另一个动画，它工作得很好。
我真的不知道问题是什么：我按照官方教程在线查看，（对我来说）我似乎做了很多工作示例。

代码如下：

app.component.html

<div [@routeAnimations]="prepareRoute(outlet)">
    <router-outlet #outlet="outlet"></router-outlet>
</div>

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'foody-client';

  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent, data: {animation: 'HomePage'} },
  { path: 'search/:q', component: HomeComponent, data: {animation: 'SearchPage'}}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

animations.ts

import { animation, animate, style, state, transition, trigger, query, stagger, group } from '@angular/animations';

  export const fade = animation([
    state('*', style({ opacity : 0 })),
    style({ opacity: 1 }),
    animate('{{ time }}')
  ]);

  export const fadeRouting =
  trigger('routeAnimations', [
    transition('HomePage <=> SearchPage', [
      /*animation code*/
    ])
  ]);

home.component.ts

import { fadeRouting } from '../../shared/animations';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-home',//
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  animations: [
    fadeRouting,

    trigger('resizeBg', [
      state('reduced', style({ minHeight: '30%' })),
      state('*', style({ minHeight: '*' })),
      transition('reduced <=> *', animate('200ms ease-out'))
    ])
  ]
})

Answer 1

我不记得原因，但对于第 3 部分模块，我有时不得不在 app.module.ts 和组件本身中导入库。

如果您将 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 添加到相关 component.ts 文件中，是否有帮助？

Answer 2

我发现了问题：我在 home.component.ts 中导入动画，而我应该在 app.component.ts

中导入并使用它

Angular 路由转换动画抛出错误（缺少模块）

Angular route transition animation throw error (missing module)

routes

angular

angular-animations