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?

Recommended Answers

All 13 Replies

Any help?

Probably not, based on the almost complete lack of details.

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

Is it "All your code?" That is, did you write it all and host it yourself? I have to ask that since every example I read such as http://plnkr.co/edit/OyGY7VVNSSAjdstr54wG?p=preview finds scripts loading from the web.

So how do you check if those sources didn't change?

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

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);

    }
}

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]

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.

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

the address tis http://localhost:8100/

That XAMPP, I don't recall that it built in Auth service like https://auth0.com/ I'd ask instead how to test your auth service.

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

Anyone knows what that means?

Where should i start to look to solve this data is null issue?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.