Reputation: 2218
I am trying to create a simple HTTP post service for my login page.
For some weird reasons, i encountered errors in my app.bundle.js:
TypeError: Cannot read property 'toString' of undefined
Uncaught TypeError: Cannot read property 'getOptional' of undefined
Using ionic2 tutorial sample project, I have done the following:
In my app.js (so my service would be accessible globally)
import {HttpService} from './services/httpService';
@App({
templateUrl: 'build/app.html',
config: {} ,// http://ionicframework.com/docs/v2/api/config/Config/
providers: [HttpService]
})
and set the rootPage to my login page
this.rootPage = LoginPage;
In my log-in.html
<button class="button button-block" (click)="loginSuccess()" style="width:70%;">
<strong>Log In</strong>
</button>
In my log-in.js
import {App, Page, Platform, IonicApp, NavParams, NavController} from 'ionic-angular';
import {HttpService} from '../../services/httpService';
@Page({
templateUrl: 'build/pages/log-in/log-in.html'
})
export class LoginPage {
constructor(nav,app,httpService) {
this.nav = nav;
this.app = app;
this.httpService = httpService;
}
loginSuccess() {
console.log("Invoked Method!");
this.httpService.loginService(event.target.value).subscribe(
data => {this.httpService = data.results; console.log(data);},
err => this.logError(err),
() => console.log('Invoked Login Service Complete')
);
}
}
httpService.JS
import { Inject } from 'angular2/core';
import { Http } from 'angular2/http';
import 'rxjs/add/operator/map';
export class httpService {
static get parameters() {
return [[Http]];
}
constructor(http) {
this.http = http
}
loginService(httpService) {
console.log("Service Function Variable: "+httpService);
// var body = "username=" + username + "&password=" + password+" &ipAddress="+ip;
var body = "username=" + "admin" + "&password=" + "admin" +" &ipAddress="+"127.0.0.1";
var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
var url = 'http://localhost/WS/Login.asmx/Login';
return this.http.post(url,body, {headers: headers}).map(res => res.json());
}
}
As you can see, I'm just trying to get my services up. All I am presented is a blank white screen and errors from app.bundle.js (which is generated at compile time), yet I do not have any compile errors while compiling.
And the app.bundle.js code which have errors are:
exports.isJsObject = isJsObject;
function print(obj) {
console.log(obj);
}
and
var inits = injector.getOptional(application_tokens_1.APP_INITIALIZER);
which I have no idea as this is generated automatically. I apologise for the code dump(I have tried to remove unnecessary stuff) as I do not know which part of it went wrong.
My ionic version is : 2.0.0-beta.25 if that helps.
Any help would be deeply appreciated.
Upvotes: 2
Views: 559
Reputation: 48
I don't see the decorator @Injectable on your service...
export class httpService {
should be (i think, I´m using v24, maybe in v25 is different?)
import {Injectable, Inject} from "angular2/core";
@Injectable export class httpService {
Upvotes: 2
Reputation: 918
Had a look at your code. I could see that you have used Headers but haven't imported them in your code. In the httpService.js file modify the import statement as shown below.
import { Http, Headers } from 'angular2/http';
app.bundle.js is simply a bundle of modules generated by webpack which is popular module loader used by Ionic.
P.S: If you are trying to implement an authentication system in your Ionic 2 application, I recommend you to have a look here.
Hope this helped you. Thanks.
Upvotes: 2