Ionic Angular Standalone components - serve/livereload

Ionic Framework
1

Im building an app using the new Standalone components in Ionic 7.5.4

When running on the device with: ionic cap run ios --external -livereload or in the browser with: Ionic serve

Everything looks fine when I dont use the Ionic standalone components.

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { BarcodeScanner, BarcodeFormat, LensFacing } from '@capacitor-mlkit/barcode-scanning';
import { RouterLinkWithHref, Router, ActivatedRoute } from '@angular/router';
import { ScrollElementDirective } from '../scroll-element.directive';
// import { IonButton, IonContent, IonCard, IonImg, IonGrid, IonModal, IonRow, IonCol, IonHeader, IonToolbar, IonTitle } from '@ionic/angular/standalone'; 


@Component({
  selector: 'app-scan',
  templateUrl: './scan.page.html',
  styleUrls: ['./scan.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule, RouterLinkWithHref, ScrollElementDirective] //, IonButton, IonContent, IonCard, IonImg, IonGrid, IonModal, IonRow, IonCol, IonHeader, IonToolbar, IonTitle]
})

As you can see I have commentet the components out, when I build on the device I need to add them back in. But then I get this error when serve/livereload:
Error: NG0300: Multiple components match node with tagname ion-header: IonHeader and IonHeader.
If I remove the ionHeader it’s just the next component that has the fault.
Is serve and livereload on the device still using modules or loading everything before the standalone modules, have any of you an idea? :slight_smile: Note: I use the tabbar, and it’s working on both methods…

2

Hi,

I had the same problem , just use the old module , But is not necessary imports the standAlone elements.

imports: [IonicModule, CommonModule, FormsModule, RouterLinkWithHref, ScrollElementDirective]

3

Thanks! Do you mean that I should remove the: imports: [IonicModule, CommonModule, FormsModule, RouterLinkWithHref, ScrollElementDirective]. And what do you mean by Old module, should I not use Angular Standalone?

4

Just remove IonicModule and it should work.
Because IonicHeader is already present insid IonicModule, that is why it is duplicate.

1 Like