角度路线过渡动画抛出错误（缺少模块）答案

【问题标题】：Angular route transition animation throw error (missing module)角度路线过渡动画抛出错误（缺少模块）
【发布时间】：2021-07-25 09:01:17
【问题描述】：

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

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

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

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

然后我尝试删除所有代码以查看出现输入问题的位置。当我在 appComponent（在 router-outlet 的 div 父级中）添加动画时，它返回错误，当我在 Routes 数组中添加数据对象（“{animation：name-animation}”）时，它返回另一个相同的错误。
它不运行动画，当我在搜索栏中插入一个字符串并按 Enter 时，它应该运行。
当我加载页面时，它显示该页面已经被触发，并且当我在搜索栏中插入一个值时按 Enter 它返回它应该是然后从不运行动画。这种现象只有在数据对象插入到 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'))
    ])
  ]
})

【问题讨论】：

标签： angular routes angular-animations

【解决方案1】：

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

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

【讨论】：

我已经尝试过（现在又试了一次），但它不起作用。但是即使我没有在组件中写任何东西并且我只是在 app-routing.module.ts 和 app.component.html 中配置路由反，应用程序也会抛出错误
我应该简单地“导入”吗？如果我导入它不起作用，因为该模块在组件中未使用。我应该在代码的其他地方添加模块吗？

【解决方案2】：

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

【讨论】：