I am using Ionic 6.2.1 and I was trying to follow this Ionic tutorial but when I try to create the alarm-controller (1:54:00 in the YT video) I get this error

Uncaught TypeError: alertCtrl.create is not a function
at HTMLElement.

This is my index.html

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Planner</title>
    <script type="module" src=""></script>
    <script nomodule src=""></script>
    <link rel="stylesheet" href=""/>
            <ion-toolbar color="primary">
                <ion-title>Budget planner</ion-title>
                    <ion-col size-md="6" offset-md="3"> 
                                <ion-card-title>New expense</ion-card-title>
                                <ion-label position="floating">Expense Reason</ion-label>
                                <ion-input type="text" id="input-reason"></ion-input>
                                    <ion-label position="floating">Expense Amount</ion-label>
                                    <ion-input type="number" id="input-amount"></ion-input>
                                <div margin-vertical class="ion-text-right ion-margin-vertical">
                                    <ion-button fill="outline" color="danger" id="btn-cancel">
                                        <ion-icon slot="start" name="close"></ion-icon>
                                    <ion-button id="btn-confirm">
                                        <ion-icon slot="start" name="add-outline"></ion-icon>
                                        Add Expense
                    <ion-col size-md="6" offset-md="3"> 
                        <ion-list id="expenses-list"></ion-list>
                    <ion-col size-md="6" offset-md="3"> 
                        <p class="ion-margin">Total Expenses: <span id="total-expenses"></span></p>
    <script src="app.js"></script>

And the app.js

const reasonInput = document.querySelector('#input-reason');

const amountInput = document.querySelector('#input-amount');

const cancelBtn = document.querySelector('#btn-cancel');

const confirmBtn = document.querySelector('#btn-confirm');

const expensesList = document.querySelector('#expenses-list');

const totalExpensesOutput = document.querySelector('#total-expenses');

const alertCtrl = document.querySelector('ion-alert-controller');

let totalExpenses = 0;

const clear = () => {

    reasonInput.value = '';

    amountInput.value = '';


confirmBtn.addEventListener('click', () => {

    const enteredReason = reasonInput.value;

    const enteredAmount = amountInput.value;

    if (

        enteredReason.trim().length <= 0 || 

        enteredAmount <= 0 || 

        enteredAmount.trim().length <= 0

    ) {


            message: 'Please enter valid reason and amount!', 

            header: 'Invalid inputs',

            buttons: ['Okay']

        }).then(alertElement => {





    const newItem = document.createElement('ion-item');

    newItem.textContent = enteredReason + ': $' + enteredAmount;


    totalExpenses += +enteredAmount;

    totalExpensesOutput.textContent = totalExpenses;



cancelBtn.addEventListener('click', clear);
  <script type="module">
    import { alertController } from '';
    window.alertController = alertController;
1 Like

<ion-alert-controller> no longer exists in Ionic 5.

If you look at how alerts are built in the latest documentation:, with javascript tab selected, you’ll see that you can structure your alert as follows (beginning where you had alertCtrl.create())

    const alert = document.createElement('ion-alert');
    alert.header = 'Invalid inputs';
    alert.message = 'Please enter a valid reason and amount.';
    alert.buttons = ['Okay'];
1 Like