Hi, I’m new to ionic, trying to write a simple authentication app. I received “Cannot read property ‘module’ of undefined” as a runtime error. Please help.
Hello,
mostly means this error that you call something that is at this time not available. If module is something, that you self wrote, then take care that whatever from whatever.module ist available. Otherwise post full errormessage and related code.
Best regards, anna-liebt
doValidate(){
var angular : any;
var logapp = angular.module('loginapp',['ionic']);
logapp.controller('logctrl',function($http,$scope){
$scope.logresult = [];
$http.get("http://localhost:8080/logintest/login.jsp").then(function(response){
$scope.logresult = response.data;
});
console.log($scope.logresult);
return $scope.logresult;
//this.navCtrl.push(HomePage);
});
}
Hello,
you declare a variable, but it seems it never gets a value before you use it.
Best regards, anna-liebt
Thanks Anna_liebt for your response.
I understand that you are referring to “var angular : any;” ,
Herewith I also attached whole code and output for more clarity, please go through the same and assist. Thanks.
login.ts
import {Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the LoginPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
doValidate(){
var angular : any;
var logapp = angular.module('loginapp',['ionic']);
logapp.controller('logctrl',function($http,$scope){
$scope.logresult = [];
$http.get("http://localhost:8080/logintest/login.jsp").then(function(response){
$scope.logresult = response.data;
});
console.log($scope.logresult);
return $scope.logresult;
//this.navCtrl.push(HomePage);
});
}
}
login.html
------------
<!--
Generated template for the LoginPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>login</ion-title>
</ion-navbar>
</ion-header>
<ion-content ng-app="loginapp" ng-controller="logctrl" padding>
<ion-list>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
</ion-list>
<button ion-button icon-right (click)="doValidate()">
Login
<ion-icon name="arrow-dropright"></ion-icon>
</button>
</ion-content>
Hello,
I am a beginner with js and ts stuff, so maybe I am completly wrong.
My understanding is that var declares a variable with function wide scope. In your case the scope beginns with doValidate(){ and ends with }. You decare a variable named angular, but never a value is assigned to it. I can not see that there is something ‘magic’ (doom) with a late bound something called angular. So in my understand the next code line fails, because undefined.module(‘loginapp’,[‘ionic’]);fails.
Maybe it helps to assign inside the scope something to your variable, so that it isn’t longer more at runtime undefined or move your declaration to a scope where it is assinged late bound to something that has an property called module and is hopefully that what you want.
As said before I am beginner with js and ts stuff, so maybe one with a better understanding can help you.
Best regards, anna-liebt
Cannot read property ‘module’ of undefined. angular is undefined.
Thanks for the reply, it would be more helpful if you can share the steps to define an angular. I’m lost here.
It looks like you cut and paste some old AngularJS code -> $scope
See: https://stackoverflow.com/questions/26921058/alternative-to-scope-in-angular-2-0
Yes I did. But it has nothing to do with the error I’m getting now. Because I’m able to successfully run the below code in HTML (in tag), whereas the same is not working while embedded in ionic framework.
var logapp = angular.module('loginapp',['ionic']);
logapp.controller('logctrl',function($http,$scope){
$scope.logresult = [];
$http.get("http://localhost:8080/logintest/login.jsp").then(function(response){
$scope.logresult = response.data;
});
console.log($scope.logresult);
return $scope.logresult;
//this.navCtrl.push(HomePage);
});
What version of Ionic are you using?
I’m using version 3, Angular 5 and rxjs 5.
See:
For example, mock-venues.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Venue } from '@core/models';
@Injectable()
export class MockVenuesService {
private readonly URL = 'assets/data/venues/venues.json';
constructor(protected httpClient: HttpClient) {}
public list(): Observable<Venue[]> {
return this.httpClient.get<Venue[]>(this.URL);
}
}
verified-venues.page.ts:
public ionViewDidLoad() {
this.venuesService.list().subscribe(data => {
data.sort((a, b) => {
return a.name < b.name ? -1 : 1;
});
this.items = data;
});
}