找到合成属性@onMainContentChange。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”答案

【问题标题】：Found the synthetic property @onMainContentChange. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application找到合成属性@onMainContentChange。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”
【发布时间】：2023-03-13 23:20:01
【问题描述】：

我有两个模块：AppModule 和 AFModule：

app.module.ts

import { NgModule } from '@angular/core';
... 
...
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
... 
@NgModule({

    imports: [
        ...
        BrowserModule,
        BrowserAnimationsModule,
        ...

    ],
    exports: [
        ...
    ],
    declarations: [
        AppComponent,
        AppHomeComponent,
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
        InternationalizationService,
        fakeBackendProvider
    ],
    bootstrap: [AppComponent]
})
export class AppModule { };

af.module.ts

import { NgModule } from '@angular/core';
import { AFLeftMenuComponent } from "@/modules/af/components/left-menu";
import { AFComponent } from './af.component';
import { CommonModule } from '@angular/common';
import { SidenavService } from '@/shared/_services/sidenav.service'
import {

    MatSelectModule,
    ...
    MatSidenavModule,
} from '@angular/material';

@NgModule({

    imports: [
        ...
        MatSelectModule,
        CommonModule,
        MatSidenavModule,
        ...
    ],
    exports: [
        ....
    ],
    declarations: [
        AFComponent,
        AFLeftMenuComponent,
        ....
    ],
    entryComponents: [],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
        SidenavService,
    ],
    bootstrap: [AFComponent]
})
export class AFModule { };

af.component.html：

<mat-sidenav-container class="sidenav-container">
      <mat-sidenav #leftSidenav mode="side" opened>
            <af-left-menu></af-left-menu>
        </mat-sidenav>
        <mat-sidenav-content [@onMainContentChange]="onSideNavChange ? 'open': 'close'">
           <div class="main_content">
                <div style="padding: 20px">
                     Your content
                </div>
                <router-outlet></router-outlet>
           </div>
        </mat-sidenav-content>
</mat-sidenav-container>

然后，它显示如下错误：

如果我将 BrowserAnimationModule 导入到 af.module.ts，它会显示错误：ERROR 错误：未捕获（承诺中）：错误：BrowserModule 已加载。如果您需要从延迟加载的模块中访问常用指令，例如 NgIf 和 NgFor，请改为导入 CommonModule。

【问题讨论】：

标签： angular angular-animations

【解决方案1】：

打扰各位了，苦苦挣扎了两天终于找到了根本原因。

我搞错了，我没有在af.component.ts中添加onMainContentChange动画。现在运行良好。

【讨论】：