0

Hello i have a Ionic Angular project. I haven't changed any of my files and i am getting an error data is null after ionic serve

That means that i can't connect to my database. I havent made any changes on the database or change any of my files.

Any help?

3
Contributors
13
Replies
39
Views
3 Months
Discussion Span
Last Post by SimonIoa
0

I pretty sure that there is nothing happened with my code so i can post something. I didnt changes anything and it worked fine

Really something happened after upgrading windows 10. I posted here to see anyone has the same issue

0

No, i dont use any files from the web. I use local files.
The problem is that i can't connect to my database. Its realy frustrating. It happened before and it was because i gave the wrong root to the config file. But i haven't made any changes i was working on another project. I updated my windows 10 and thats it. Always that annoying error 'data is null'

authservice.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

let apiUrl = "http://localhost/PHP-Slim-Restful1/api/";

@Injectable()
export class AuthService {
  constructor(public http: Http) {
    console.log('Hello AuthService Provider');
  }

  postData(credentials, type) {
      return new Promise((resolve, reject) => {

      let headers = new Headers();
      this.http.post(apiUrl+type, JSON.stringify(credentials), {headers: headers}).
      subscribe(res =>{
        resolve(res.json());
      }, (err) =>{
        reject(err);
      });

    });

  }

}

console

MyApp@http://localhost:8100/build/main.js:1563:9 createClass@http://localhost:8100/build/vendor.js:13135:20 createDirectiveInstance@http://localhost:8100/build/vendor.js:12970:37 createViewNodes@http://localhost:8100/build/vendor.js:14428:53 createRootView@http://localhost:8100/build/vendor.js:14317:5 callWithDebugContext@http://localhost:8100/build/vendor.js:15742:39 debugCreateRootView@http://localhost:8100/build/vendor.js:15025:12 ComponentFactory_.prototype.create@http://localhost:8100/build/vendor.js:11922:37 ComponentFactoryBoundToModule.prototype.create@http://localhost:8100/build/vendor.js:4709:16 ViewContainerRef_.prototype.createComponent@http://localhost:8100/build/vendor.js:12119:45 IonicApp.prototype.ngOnInit@http://localhost:8100/build/vendor.js:61552:28 checkAndUpdateDirectiveInline@http://localhost:8100/build/vendor.js:13055:9 checkAndUpdateNodeInline@http://localhost:8100/build/vendor.js:14579:20 checkAndUpdateNode@http://localhost:8100/build/vendor.js:14522:16 debugCheckAndUpdateNode@http://localhost:8100/build/vendor.js:15415:55 debugCheckDirectivesFn@http://localhost:8100/build/vendor.js:15356:13 View_IonicApp_Host_0/<@ng:///IonicModule/IonicApp_Host.ngfactory.js:10:5 debugUpdateDirectives@http://localhost:8100/build/vendor.js:15341:12 checkAndUpdateView@http://localhost:8100/build/vendor.js:14488:5 callWithDebugContext@http://localhost:8100/build/vendor.js:15742:39 debugCheckAndUpdateView@http://localhost:8100/build/vendor.js:15279:12 ViewRef_.prototype.detectChanges@http://localhost:8100/build/vendor.js:12263:13 ApplicationRef.prototype.tick/<@http://localhost:8100/build/vendor.js:6593:58 ApplicationRef.prototype.tick@http://localhost:8100/build/vendor.js:6593:13 ApplicationRef.prototype._loadComponent@http://localhost:8100/build/vendor.js:6659:9 ApplicationRef.prototype.bootstrap@http://localhost:8100/build/vendor.js:6547:9 PlatformRef.prototype._moduleDoBootstrap/<@http://localhost:8100/build/vendor.js:6267:74 PlatformRef.prototype._moduleDoBootstrap@http://localhost:8100/build/vendor.js:6267:13 PlatformRef.prototype.bootstrapModuleFactory/</</<@http://localhost:8100/build/vendor.js:6188:21 F</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14974 onInvoke@http://localhost:8100/build/vendor.js:5435:24 F</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14901 F</c</r.prototype.run@http://localhost:8100/build/polyfills.js:3:10124 f/<@http://localhost:8100/build/polyfills.js:3:20240 F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649 onInvokeTask@http://localhost:8100/build/vendor.js:5426:24 F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562 F</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815 o@http://localhost:8100/build/polyfills.js:3:7887
0

Is it because of dublicate entries?

i use 'MyApp' only on my app.compontent.ts file

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, App, MenuController } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { TabsPage } from '../pages/tabs/tabs';

import { SplitPane } from '../providers/split-pane';

import { AuthService } from "../providers/auth-service";

import { Common } from "../providers/common";

import { SettingsPage } from '../pages/settings/settings';
import { AccountPage } from '../pages/account/account';

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    @ViewChild(Nav) nav: Nav;

    rootPage = TabsPage;

    pages: Array<{ title: string, component: any }>;
    public userDetails: any;
    public resposeData: any;
    public dataSet: any;
    public groupSet: any;
    public pressSet: any;

    userPostData = {
        uid: "",
        token: "",
        username: "",
        bio: "",
        profile_pic: ""
    };
    constructor
        (
        public platform: Platform,
        public splitPane: SplitPane,
        public authService: AuthService,
        public common: Common,
        public app: App,
        public menu: MenuController
        ) {

        this.initializeApp();

        const data = JSON.parse(localStorage.getItem("userData"));
        this.userDetails = data.userData;
        this.userPostData.uid = this.userDetails.uid;
        this.userPostData.token = this.userDetails.token;
        this.userPostData.username = this.userDetails.username;
        this.userPostData.profile_pic = this.userDetails.profile_pic;
        this.userPostData.bio = this.userDetails.bio;
        this.userDetail();
        this.pressList();
        this.groupList();

        // used for an example of ngFor and navigation
        this.pages = [
            { title: 'Homepage', component: TabsPage },
            { title: 'Settings', component: SettingsPage },
            { title: 'Account', component: AccountPage }
        ];

    }

    userDetail() {
        this.authService.postData(this.userPostData, "userDetails").then(

            result => {
                this.resposeData = result;
                if (this.resposeData.userDetails) {
                    this.dataSet = this.resposeData.userDetails;
                    console.log(this.dataSet);

                } else {
                    console.log("No access");
                }
            },
            err => {
                //Connection failed message
            }
        );
    }

    SettingsPage() {
        // Reset the content nav to have just this page
        // we wouldn't want the back button to show in this scenario
        this.nav.push(SettingsPage);
    }

    AccountPage() {
        // Reset the content nav to have just this page
        // we wouldn't want the back button to show in this scenario
        this.nav.push(AccountPage);
    }

    initializeApp() {
        this.platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            StatusBar.styleDefault();
            Splashscreen.hide();
        });
    }

    pressList() {
        this.authService.postData(this.userPostData, "pressList").then(

            result => {
                this.resposeData = result;
                if (this.resposeData.pressList) {
                    this.pressSet = this.resposeData.pressList;
                    console.log(this.pressSet);

                } else {
                    console.log("No access");
                }
            },
            err => {
                //Connection failed message
            }
        );
    }

    groupList() {
        this.authService.postData(this.userPostData, "groupsList").then(

            result => {
                this.resposeData = result;
                if (this.resposeData.groupsList) {
                    this.groupSet = this.resposeData.groupsList;
                    console.log(this.groupSet);

                } else {
                    console.log("No access");
                }
            },
            err => {
                //Connection failed message
            }
        );
    }

    backToWelcome() {
        const root = this.app.getRootNav();
        root.popToRoot();
    }

    logout() {
        //Api Token Logout 

        localStorage.clear();
        this.menu.enable(false);
        setTimeout(() => this.backToWelcome(), 1000);

    }
}
0

Could it be a .access thing?

RewriteEngine On

#RewriteBase /api/

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]
0

One of the Windows OS complaints is that updates can reset settings and break installed apps. You've found that you can't connect to your server so that's what you work next. I don't admin your setup so you are the expert at this point with you going over your setup and settings.

0

But other projects i use on localhost work just fine. Only my Ionic project with authservice doesnt work. WHt should i check first?

0

on IE i am getting unable to get property 'userData' of undefined or null reference

Anyone knows what that means?

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.