Error: "Uncaught (in promise): Error: Unexpected value 'AlertController' imported by the module 'LoginPageModule'. Please add a @NgModule annotation

Question

Ionic Error: "Uncaught (in promise): Error: Unexpected value 'AlertController' imported by the module 'LoginPageModule'. Please add a @NgModule annotation. Ionic app to use alertcontroller. It is showing this error in console. Login page is not getting opened. Added in app.module.ts also.

login.page.ts

import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';



@Component({
 selector: 'app-login',
 templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
  })


export class LoginPage implements OnInit {
constructor(public alertController: AlertController) { 
console.log("hello");
}
ngOnInit() {
}


async presentAlertPrompt() {
const alert = await this.alertController.create({
  header: 'Prompt!',
  inputs: [
    {
      name: 'name1',
      type: 'text',
      placeholder: 'Placeholder 1'
    },
    {
      name: 'name2',
      type: 'text',
      id: 'name2-id',
      value: 'hello',
      placeholder: 'Placeholder 2'
    },
    {
      name: 'name3',
      value: 'http://ionicframework.com',
      type: 'url',
      placeholder: 'Favorite site ever'
    },
    // input date with min & max
    {
      name: 'name4',
      type: 'date',
      min: '2017-03-01',
      max: '2018-01-12'
    },
    // input date without min nor max
    {
      name: 'name5',
      type: 'date'
    },
    {
      name: 'name6',
      type: 'number',
      min: -5,
      max: 10
    },
    {
      name: 'name7',
      type: 'number'
    }
  ],
  buttons: [
    {
      text: 'Cancel',
      role: 'cancel',
      cssClass: 'secondary',
      handler: () => {
        console.log('Confirm Cancel');
      }
    }, {
      text: 'Ok',
      handler: () => {
        console.log('Confirm Ok');
      }
    }
  ]
});

} }

login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular-lite';
import { AlertController } from '@ionic/angular';
import { IonicModule } from '@ionic/angular';
import { LoginPage } from './login.page';

const routes: Routes = [
{
path: '',
component: LoginPage
}
];

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
MbscModule,
ReactiveFormsModule,
AlertController,


RouterModule.forChild(routes)
],
declarations: [LoginPage]
})
export class LoginPageModule {}

Answer 1

You don't have to import AlertController in module.ts files, removing the statements from both app.module and login.module should run your application.

Answer 2

Try this code

login.ts

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

constructor(
   private alertCtrl: AlertController
) { }

presentAlertPrompt() {
    this.alertCtrl.create({
      header: 'Are you sure?',
      message: 'Do you really want to delete this car?',
      buttons: [{
        text: 'Cancel',
        role: 'cancel'
      },
      {
        text: 'Yes',
        handler: () => {
          cosole.log('handle function here');
        }
      }
    ]
    }).then(alertPresent => {
      alertPresent.present();
    });
  }

In login.html, button to open alert

<ion-button (click)="presentAlertPrompt()">