How to resolve error NG0500 During hydration Angular expected <ion-toolbar> but found a comment node

Question

I am using Angular (17.2) and Ionic (7.7.4) in an NX monorepo. However experiencing the following issues:

▲ [WARNING] The glob pattern import("./**/*.entry.js*") did not match any files [empty-glob]                                                          

    node_modules/@stencil/core/internal/client/index.js:4019:4:
      4019 │     `./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVe...

as well as error-handler.service.ts:11 Error: NG0500: During hydration Angular expected <ion-toolbar> but found a comment node.

I am expecting that Ionic supports Angulars SSR

Answer 1

With Angular standalone components, you cannot use IonicModule :

import { IonicModule } from '@ionic/angular';

you need to import elements individually :

import { IonButton, IonMenu, etc. } from '@ionic/angular/standalone';

and then list them in component's imports:[]