Unexpected synthetic listener @transform.start found

Issue

I am working with the newest version of angular, which seems to require all standalone components, and doesn't work with appModule anymore. So I tried to reshape my project to accomodate this, now I get this error: Unexpected synthetic listener @transform.start found. When I then try to add this BrowserAnimationsModule to my appComponent it gives another error: NG05100: Providers from the BrowserModulehave already been loaded. If you need access to common directives such as NgIf and NgFor, import theCommonModule instead. I am lost here as to what to do. I will post my full code below, and hope someone can help me with this.

Main.ts:

import { enableProdMode } from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';

import { environment } from './environments/environment';
import { AppComponent } from './app/app.component';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent);

app/app.routes.ts

import { Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { PricesComponent } from './prices/prices.component';
import { AppointmentsComponent } from './appointments/appointments.component';
import { BlogComponent } from './blog/blog.component';
import { ContactComponent } from './contact/contact.component';
import { InspirationComponent } from './inspiration/inspiration.component';

export const routes: Routes = [
    {path: 'about' , component: AboutComponent},
    {path: 'prices' , component: PricesComponent},
    {path: 'appointment' , component: AppointmentsComponent},
    {path: 'blog' , component: BlogComponent},
    {path: 'contact' , component: ContactComponent},
    {path: 'inspiration' , component: InspirationComponent},
];

app/app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(), provideAnimations(), provideAnimations()]
};

app/app.component.ts

import { Component, ViewChild } from '@angular/core';

import { BreakpointObserver } from '@angular/cdk/layout';
import { MatSidenav } from '@angular/material/sidenav';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatCardModule} from '@angular/material/card';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatIconModule} from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import {RouterModule} from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    MatToolbarModule,
    MatCardModule,
    MatGridListModule,
    MatIconModule,
    MatSidenavModule,
    MatListModule,
    MatButtonModule,
    BrowserAnimationsModule,
    CommonModule,
    RouterModule,
    RouterOutlet
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'nagelstudio-website';
  @ViewChild(MatSidenav)
  sidenav!: MatSidenav;
  isMobile= true;
  isCollapsed = true;
  footer = true;

  constructor(private observer: BreakpointObserver) {}

  ngOnInit() {
    this.observer.observe(['(max-width: 800px)']).subscribe((screenSize) => {
      if(screenSize.matches){
        this.isMobile = true;
      } else {
        this.isMobile = false;
      }
    });
  }
  
  toggleMenu() {
    if(this.isMobile){
      this.sidenav.toggle();
      this.isCollapsed = false; // On mobile, the menu can never be collapsed
    } else {
      this.sidenav.open(); // On desktop/tablet, the menu can never be fully closed
      this.isCollapsed = !this.isCollapsed;
    }
  }
}

app/app.component.html

<mat-toolbar color="primary">
  <button mat-icon-button aria-label="Menu icon" (click)="toggleMenu()">
    <mat-icon>menu</mat-icon>
  </button>
  <h1>Ambeline</h1>
</mat-toolbar>

<mat-sidenav-container autosize>
  <mat-sidenav [ngClass]="!isCollapsed ? 'expanded' : ''" [mode]="isMobile ? 'over' : 'side'" [opened]="isMobile ? 'false' : 'true'">
    <mat-nav-list>

      <a mat-list-item [routerLink] = "'/'"> 
        <span class="entry">
           <mat-icon>house</mat-icon>
           <span *ngIf="!isCollapsed">Homepage</span>
        </span>
     </a>
      <a mat-list-item [routerLink] = "'/about'">
        <span class="entry">
           <mat-icon>person</mat-icon>
           <span *ngIf="!isCollapsed">Over mij</span>
        </span>
     </a>
      <a mat-list-item [routerLink] = "'/prices'">
        <span class="entry">
           <mat-icon>sell</mat-icon>
           <span *ngIf="!isCollapsed">Prijslijst</span>
        </span>
     </a>
     <a mat-list-item [routerLink] = "'/appointment'">
      <span class="entry">
         <mat-icon>event note</mat-icon>
         <span *ngIf="!isCollapsed">Maak je afspraak!</span>
      </span>
   </a>
   <a mat-list-item [routerLink] = "'/inspiration'">
      <span class="entry">
         <mat-icon>photo_camera</mat-icon>
         <span *ngIf="!isCollapsed">inspiratie</span>
      </span>
   </a>
      <a mat-list-item [routerLink] = "'/blog'">
        <span class="entry">
           <mat-icon>feed</mat-icon>
           <span *ngIf="!isCollapsed">Blog</span>
        </span>
     </a>
     <a mat-list-item [routerLink] = "'/contact'">
      <span class="entry">
         <mat-icon>call</mat-icon>
         <span *ngIf="!isCollapsed">Contact</span>
      </span>
   </a>
      
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

<mat-toolbar [class.footer]="footer"> 
   <span [class.center]="footer">&copy;2023 <span [class.padding]="footer">&#x25CF;</span> Ambeline <span [class.padding]="footer">&#x25CF;</span> Adres: Zag 18, 2580 PUTTE <span [class.padding]="footer">&#x25CF;</span> BTW: x</span>
</mat-toolbar>

app/inspiration/inspiration.component.ts

import { Component } from '@angular/core';
import { Color } from './model/color';
import { ColorService } from './service/color.service';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatCardModule} from '@angular/material/card';
import {MatGridListModule} from '@angular/material/grid-list';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-inspiration',
  standalone: true,
  imports: [
    MatProgressSpinnerModule,
    MatGridListModule,
    MatCardModule,
    CommonModule
  ],
  templateUrl: './inspiration.component.html',
  styleUrl: './inspiration.component.scss'
})
export class InspirationComponent {
  colors: Color[] = [];
  displaySpinner: boolean = true;

  constructor(private colorsService: ColorService, private breakpointObserver: BreakpointObserver) { }

  ngOnInit(): void {
this.colorsService.getColors()
    .subscribe((colors) => {
      this.colors = colors
      this.colors.sort((a,b) => a.name.localeCompare(b.name));
    }, err => {
      this.displaySpinner = false;
    }, () => {
      this.displaySpinner = false;
    });


}

  cols$: Observable<number> = this.breakpointObserver
    .observe([Breakpoints.Small, Breakpoints.XSmall])
    .pipe(
      map((result) => {
        if (result.breakpoints[Breakpoints.XSmall]) {
          return 1;
        } else if (result.breakpoints[Breakpoints.Small]) {
          return 2;
        } else {
          return 3;
        }
      }),
      shareReplay()
    );

}

app/inspiration/inspiration.component.html

<div class="container">
    <div *ngIf="displaySpinner" style="width: 10%; margin: 30px auto;">
        <mat-spinner></mat-spinner>
        <p style="margin-top: 25px; font-size:1.1rem;">Dit kan even duren, wees geduldig dan kan u zo de kleuren
            bekijken!</p>
    </div>
    <mat-grid-list [cols]="cols$ | async" rowHeight="265" gutterSize="25px">
        <mat-grid-tile *ngFor="let color of colors">
            <mat-card class="example-card"
                style="width: 95%; border-radius:15px; box-shadow: 4px 4px 6px -1px rgba(0,0,0,0.15);">
                <mat-card-content>
                    <p>{{color.name}}</p>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>
    </mat-grid-list>
</div>

app/inspiration/model/color.ts

export interface Color {
    id: number;
    number: string;
    name: string;
    imagePath: string;
    category: string;
    color: string;
    brand: string;
}

app/inspiration/service/color.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Color } from '../model/color';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ColorService {
  private productsUrl = 'http://localhost:5500/colors/';
  // private productsUrl = 'https://haakvriendjeswebshop.herokuapp.com/products/';

  constructor(private http: HttpClient) { }

  getColors(): Observable<Color[]> {
    return this.http.get<Color[]>(this.productsUrl)
  }
}

If you need more information, let me know!

Solution

You create an appConfig, but you don't use it when bootstrapping the application.

Change the following in you main.ts file:

bootstrapApplication(AppComponent, appConfig);

Now after removing all occurrences of BrowserAnimationsModule, it should work again.

For more information, see the standalone guide.

Answered By - JSON Derulo