🐛 Bug Report: Angular ^17.0.0 - flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering

[raimonlpz]

📜 Description

I'm trying to integrate Novu ("@novu/notification-center-angular": "^0.24.1") with my Angular (^17.0.0) project, it compiles ok, but all of a sudden I get this error logged in the console, I reproduced the error in a fresh new Angular project and it's throwing the same error. The Novu widget works perfectly, by the way.

Log:

As I'm using the standalone component system approach, I'm importing Novu dependencies in the component itself:

// app.component.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { NotificationCenterModule } from '@novu/notification-center-angular';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [CommonModule, RouterOutlet, NotificationCenterModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'novu17';

  subscriberId = environment.subscriberId;
  applicationIdentifier = environment.applicationIdentifier;

  styles = {
    bellButton: {
      root: {
        svg: {
          color: 'white',
          width: '45px',
          height: '40px',
          fill: 'white',
        },
      },
      dot: {
        rect: {
          fill: 'rgb(221, 0, 49)',
          strokeWidth: '0.2',
          stroke: 'white',
          width: '3.5px',
          height: '3.5px',
        },
        left: '40%',
      },
    },
    header: {
      root: {
        backgroundColor: '',
        '&:hover': { backgroundColor: '' },
        '.some_class': { color: '' },
      },
    },
    layout: {
      root: {
        backgroundColor: '',
      },
    },
    popover: {
      arrow: {
        backgroundColor: '',
        border: '',
      },
    },
  };

  sessionLoaded = (data: unknown) => {
    console.log('loaded', { data });
  };
}```

// HTML:

width="40"
alt="Angular Logo"
src=""

/>
Welcome

  [subscriberId]="subscriberId"
  [applicationIdentifier]="applicationIdentifier"
  [sessionLoaded]="sessionLoaded"
  [styles]="styles"
>


aria-label="Angular on twitter"
target="_blank"
rel="noopener"
href="https://twitter.com/angular"
title="Twitter"

  id="twitter-logo"
  height="24"
  data-name="Logo"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 400 400"
>
  
  



aria-label="Angular on YouTube"
target="_blank"
rel="noopener"
href="https://youtube.com/angular"
title="YouTube"

  id="youtube-logo"
  height="24"
  width="24"
  data-name="Logo"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="#fff"
>

`

// package.json:

{ "name": "novu17", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^17.0.0", "@angular/common": "^17.0.0", "@angular/compiler": "^17.0.0", "@angular/core": "^17.0.0", "@angular/forms": "^17.0.0", "@angular/platform-browser": "^17.0.0", "@angular/platform-browser-dynamic": "^17.0.0", "@angular/router": "^17.0.0", "@novu/notification-center-angular": "^0.24.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.2" }, "devDependencies": { "@angular-devkit/build-angular": "^17.0.0", "@angular/cli": "^17.0.0", "@angular/compiler-cli": "^17.0.0", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.2.2" } }

// tsconfig.json:

`/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

This does not look such a big deal, but certainly, the app routing stopped working when integrating Novu. The URL changes parameters/slug when some routed button/anchor tag is triggered, but the page don't render new views. It might be related with the error logged. 

I've also installed @types/react as suggested by the Docs (btw some lib types are not synhcronized with last versions of this package, so had to downgrade @types/react), it made no difference.

### 👟 Reproduction steps

1. Just follow same steps from https://docs.novu.co/quickstarts/angular
2. Make sure to use last version of Angular (v.17)

### 👍 Expected behavior

Just not throwing this React related error and allowing the app to work as expected (standard routing between components on click routed elements -currently blocked-).

### 👎 Actual Behavior with Screenshots

Logged error:
<img width="1319" alt="Screenshot 2024-05-16 at 18 50 56" src="https://github.com/novuhq/angular-quickstart/assets/59086203/13a41278-ed91-4ae2-bd69-0f4920d878fa">
<img width="661" alt="Screenshot 2024-05-16 at 18 51 10" src="https://github.com/novuhq/angular-quickstart/assets/59086203/2b20ade4-1fae-4d63-9931-ed1dc32046d8">

And app internal routing completely blocked.

### Novu version

^0.22.0

### npm version

10.1.0

### node version

20.9.0

### 📃 Provide any additional context for the Bug.

_No response_

### 👀 Have you spent some time to check if this bug has been raised before?

- [X] I checked and didn't find a similar issue

### 🏢 Have you read the Contributing Guidelines?

- [X] I have read the [Contributing Guidelines](https://github.com/novuhq/novu/blob/main/CONTRIBUTING.md)

### Are you willing to submit PR?

None

[linear]

NV-3821 🐛 Bug Report: Angular ^17.0.0 - flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering

[DKlaper]

I can confirm that I also see this warning. I have an existing angular 15 application... no idea if it's just old angular versions affected.