Ionic 5 blank page

in app.component.ts my function to get root page is

getFirstPage() {

    this.storage.get('welcome').then(done => {

      if (!done) {

        this.navCtrl.navigateRoot('WelcomePage');

        //this.rootPage = 'WelcomePage';

        //this.nav.setRoot(WelcomePage);

      } else {

        this.auth.check().then(isLogged => {

          if (!isLogged) {

            this.navCtrl.navigateRoot('WelcomePage');

            //this.rootPage = 'LoginPage';

            //this.nav.setRoot(LoginPage);

          } else {

            this.navCtrl.navigateRoot('AccountPage');

            //this.rootPage = 'AccountPage';

            //this.nav.setRoot(AccountPage);

          }

        });

      }

    });

  }

my app-routing.module.ts is:

import { NgModule } from '@angular/core';

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

import {BrowserModule} from '@angular/platform-browser';

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

const routes: Routes = [

    { path: '', redirectTo: 'welcome', pathMatch: 'full' },

    { path: 'home',

      loadChildren: () => import('../pages/home/home.module' ).then( m => m.HomePageModule) },

    { path: 'about',

      loadChildren: () => import('../pages/about/about.module' ).then( m => m.AboutPageModule) },

    { path: 'account',

      loadChildren: () => import('../pages/account/account.module' ).then( m => m.AccountPageModule) },

    { path: 'account-value-detail',

      loadChildren: () => import('../pages/account-value-detail/account-value-detail.module' ).then( m => m.AccountValueDetailPageModule) },

    { path: 'add-account',

      loadChildren: () => import('../pages/add-account/add-account.module' ).then( m => m.AddAccountPageModule) },

    { path: 'add-product',

      loadChildren: () => import('../pages/add-product/add-product.module' ).then( m => m.AddProductPageModule) },

    { path: 'bank-draft-config',

      loadChildren: () => import('../pages/bank-draft-config/bank-draft-config.module' ).then( m => m.BankDraftConfigPageModule) },

    { path: 'bank-draft-detail',

      loadChildren: () => import('../pages/bank-draft-detail/bank-draft-detail.module' ).then( m => m.BankDraftDetailPageModule) },

    { path: 'bug',

      loadChildren: () => import('../pages/bug/bug.module' ).then( m => m.BugPageModule) },

    { path: 'cart',

      loadChildren: () => import('../pages/cart/cart.module' ).then( m => m.CartPageModule) },

    { path: 'checkout',

      loadChildren: () => import('../pages/checkout/checkout.module' ).then( m => m.CheckoutPageModule) },

    { path: 'contact',

      loadChildren: () => import('../pages/contact/contact.module' ).then( m => m.ContactPageModule) },

    { path: 'donate',

      loadChildren: () => import('../pages/donate/donate.module' ).then( m => m.DonatePageModule) },

    { path: 'edit-product',

      loadChildren: () => import('../pages/edit-product/edit-product.module' ).then( m => m.EditProductPageModule) },

    { path: 'help',

      loadChildren: () => import('../pages/help/help.module' ).then( m => m.HelpPageModule) },

    { path: 'invite-friends',

      loadChildren: () => import('../pages/invite-friends/invite-friends.module' ).then( m => m.InviteFriendsPageModule) },

    { path: 'language',

      loadChildren: () => import('../pages/language/language.module' ).then( m => m.LanguagePageModule) },

    { path: 'login',

      loadChildren: () => import('../pages/login/login.module' ).then( m => m.LoginPageModule) },

    { path: 'my-products',

      loadChildren: () => import('../pages/my-products/my-products.module' ).then( m => m.MyProductsPageModule) },

    { path: 'my-sales',

      loadChildren: () => import('../pages/my-sales/my-sales.module' ).then( m => m.MySalesPageModule) },

    { path: 'my-sales-detail',

      loadChildren: () => import('../pages/my-sales-detail/my-sales-detail.module' ).then( m => m.MySalesDetailPageModule) },

    { path: 'my-shopping',

      loadChildren: () => import('../pages/my-shopping/my-shopping.module' ).then( m => m.MyShoppingPageModule) },

    { path: 'my-shoppings-detail',

      loadChildren: () => import('../pages/my-shoppings-detail/my-shoppings-detail.module' ).then( m => m.MyShoppingsDetailPageModule) },

    { path: 'my-shoppings-map',

      loadChildren: () => import('../pages/my-shoppings-map/my-shoppings-map.module' ).then( m => m.MyShoppingsMapPageModule) },

    { path: 'payout',

      loadChildren: () => import('../pages/payout/payout.module' ).then( m => m.PayoutPageModule) },

    { path: 'posts',

      loadChildren: () => import('../pages/posts/posts.module' ).then( m => m.PostsPageModule) },

    { path: 'post-show',

      loadChildren: () => import('../pages/post-show/post-show.module' ).then( m => m.PostShowPageModule) },

    { path: 'privacy',

      loadChildren: () => import('../pages/privacy/privacy.module' ).then( m => m.PrivacyPageModule) },

    { path: 'product-list-filter-options',

      loadChildren: () => import('../pages/product-list-filter-options/product-list-filter-options.module' ).then( m => m.ProductListFilterOptionsPageModule) },

    { path: 'product-map-list-filter-options',

      loadChildren: () => import('../pages/product-map-list-filter-options/product-map-list-filter-options.module' ).then( m => m.ProductMapListFilterOptionsPageModule) },

    { path: 'products-list',

      loadChildren: () => import('../pages/products-list/products-list.module' ).then( m => m.ProductsListPageModule) },

    { path: 'profile',

      loadChildren: () => import('../pages/profile/profile.module' ).then( m => m.ProfilePageModule) },

    { path: 'profile-bank-draft',

      loadChildren: () => import('../pages/profile-bank-draft/profile-bank-draft.module' ).then( m => m.ProfileBankDraftPageModule) },

    { path: 'redeem-money',

      loadChildren: () => import('../pages/redeem-money/redeem-money.module' ).then( m => m.RedeemMoneyPageModule) },

    { path: 'refund-buyer',

      loadChildren: () => import('../pages/refund-buyer/refund-buyer.module' ).then( m => m.RefundBuyerPageModule) },

    { path: 'refund-seller',

      loadChildren: () => import('../pages/refund-seller/refund-seller.module' ).then( m => m.RefundSellerPageModule) },

    { path: 'request-permissions',

      loadChildren: () => import('../pages/request-permissions/request-permissions.module' ).then( m => m.RequestPermissionsPageModule) },

    { path: 'sale',

      loadChildren: () => import('../pages/sale/sale.module' ).then( m => m.SalePageModule) },

    { path: 'settings',

      loadChildren: () => import('../pages/settings/settings.module' ).then( m => m.SettingsPageModule) },

    { path: 'social-networks',

      loadChildren: () => import('../pages/sociais-networks/sociais-networks.module' ).then( m => m.SociaisNetworksPageModule) },

    { path: 'terms',

      loadChildren: () => import('../pages/terms/terms.module' ).then( m => m.TermsPageModule) },

    { path: 'welcome',

      loadChildren: () => import('../pages/welcome/welcome.module' ).then( m => m.WelcomePageModule) }

];

@NgModule({

  imports: [

    BrowserModule,

    FormsModule,

    ReactiveFormsModule,

    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

  ],

  exports: [RouterModule]

})

export class AppRoutingModule {}

my app.module.ts is:

import {NgModule, APP_INITIALIZER, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';

import {BrowserModule} from '@angular/platform-browser';

import {RouteReuseStrategy} from '@angular/router';

import {IonicModule, IonicRouteStrategy} from '@ionic/angular';

import {StatusBar} from '@ionic-native/status-bar/ngx';

import {SplashScreen} from '@ionic-native/splash-screen/ngx';

import {AppComponent} from './app.component';

import {IonicStorageModule, Storage} from '@ionic/storage';

import {environment} from '../environments/environment';

import {Globalization} from '@ionic-native/globalization/ngx';

import {GoogleAnalytics} from '@ionic-native/google-analytics/ngx';

import {Geolocation} from '@ionic-native/geolocation/ngx';

import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';

import { GoogleMaps } from '@ionic-native/google-maps/ngx';

import {EmailComposer} from '@ionic-native/email-composer/ngx';

import {SocialSharing} from '@ionic-native/social-sharing/ngx';

import {Toast} from '@ionic-native/toast/ngx';

import {TranslateModule, TranslateLoader} from '@ngx-translate/core';

import {TranslateHttpLoader} from '@ngx-translate/http-loader';

import {HttpModule, Http, XHRBackend} from '@angular/http';

import {JwtClientProvider} from '../providers/jwt-client/jwt-client';

import {FormsModule} from '@angular/forms';

import { NgxMaskModule, IConfig } from 'ngx-mask';

import { JwtHelperService, JwtModule, JWT_OPTIONS } from "@auth0/angular-jwt";

import {AuthProvider} from '../providers/auth/auth';

import { AuthService } from './auth/auth.service';

import { AuthGuardService } from './auth/auth-guard.service';

import {DefaultXHRBackendProvider} from '../providers/default-xhr-backend/default-xhr-backend';

import {RedirectorProvider} from '../providers/redirector/redirector';

import {Facebook} from '@ionic-native/facebook/ngx';

import {UserResourceProvider} from '../providers/user-resource/user-resource';

import {GooglePlus} from '@ionic-native/google-plus/ngx';

import {TwitterConnect} from '@ionic-native/twitter-connect/ngx';

import {PaymentResource} from '../providers/payment-resource/payment-resource';

import {AccountResource} from '../providers/account-resource/account-resource';

import {BankDraftResource} from '../providers/bank-draft-resource/bank-draft-resource';

import {DonationResource} from '../providers/donation-resource/donation-resource';

import {NumberFormatProvider} from '../providers/number-format/number-format';

import {WpPostsProvider} from '../providers/wp-posts/wp-posts';

import {AppConfigProvider} from '../providers/app-config/app-config';

import {Network} from '@ionic-native/network/ngx';

import {NetworkCheckProvider} from '../providers/network-check/network-check';

import {FileTransfer} from "@ionic-native/file-transfer/ngx";

import {FileChooser} from "@ionic-native/file-chooser/ngx";

import {TicketResourceProvider} from '../providers/ticket-resource/ticket-resource';

import {AccountPageModule} from "../pages/account/account.module";

import {LanguagePageModule} from "../pages/language/language.module";

import {ProductFilter, ProductResourceProvider} from '../providers/product-resource/product-resource';

import {CartProvider} from '../providers/cart/cart';

import {SaleResourceProvider} from '../providers/sale-resource/sale-resource';

import {ApiConfigurationProvider} from '../providers/api-configuration/api-configuration';

import {ProfileBankDraftResourceProvider} from '../providers/profile-bank-draft-resource/profile-bank-draft-resource';

import {ConfigurationResourceProvider} from '../providers/configuration-resource/configuration-resource';

import {BankDraftConfigResourceProvider} from '../providers/bank-draft-config-resource/bank-draft-config-resource';

import {AgmCoreModule} from '@agm/core';

import {GeocodingApiProvider} from '../providers/geocoding-api/geocoding-api';

import {RefundResourceProvider} from '../providers/refund-resource/refund-resource';

import {MaskNumber} from "../models/mask-number";

import {ProductListFilterOptionsPageModule} from "../pages/product-list-filter-options/product-list-filter-options.module";

import { BanksResource } from '../providers/banks-resource/banks-resource';

import { InstitutesResourceProvider } from '../providers/institutes-resource/institutes-resource';

import { MaterialsResourceProvider } from '../providers/materials-resource/materials-resource';

import { StatesResourceProvider } from '../providers/states-resource/states-resource';

import { ProfileResourceProvider } from '../providers/profile-resource/profile-resource';

import { Device } from '@ionic-native/device/ngx';

import { ItemsResourceProvider } from '../providers/items-resource/items-resource';

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

export function appInitFactory(appConfig) {

    return () => appConfig.load();

}

export function createTranslateLoader(http: HttpClient) {

    return new TranslateHttpLoader(http, './assets/i18n/', '.json');

}

// export function authHttpFactory(http, storage) {

//     let authConfig = new AuthConfig({

//         headerPrefix: 'Bearer',

//         noJwtError: true,

//         noClientCheck: true,

//         tokenGetter: (function () {

//             return storage.get(environment.TOKEN_NAME)

//         })

//     });

//     return new AuthHttp(authConfig, http);

// }

@NgModule({

    declarations: [AppComponent],

    imports: [

        FormsModule,

        ProductListFilterOptionsPageModule,

        AccountPageModule,

        LanguagePageModule,

        NgxMaskModule,

        BrowserModule,

        HttpModule,

        HttpClient,

        HttpParams,

        HttpHeaders,

        JwtHelperService,

        // Jwt Token Injection

        JwtModule.forRoot({

          jwtOptionsProvider: {

              provide: JWT_OPTIONS,

              useFactory: jwtOptionsFactory,

              deps: [AuthService]

          }

        }),

        TranslateModule.forRoot({

            loader: {

                provide: TranslateLoader,

                useFactory: (createTranslateLoader),

                deps: [HttpClient]

            }

        }),

        IonicModule.forRoot(),

        IonicStorageModule.forRoot({

            driverOrder: ['localstorage']

        }),

        AgmCoreModule.forRoot({

            apiKey: environment.GOOGLE_API_KEY

        })

    ],

    exports: [],

    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],

    bootstrap: [AppComponent],

    entryComponents: [

        AppComponent

    ],

    providers: [

        {

            provide: APP_INITIALIZER,

            deps: [AppConfigProvider],

            useFactory: appInitFactory,

            multi: true

        },

        AuthService,

        AuthGuardService,

        StatusBar,

        SplashScreen,

        Globalization,

        GoogleAnalytics,

        GooglePlus,

        TwitterConnect,

        SocialSharing,

        EmailComposer,

        Toast,

        Facebook,

        Geolocation,

        NativeGeocoder,

        GoogleMaps,

        Device,

        AuthProvider,

        RedirectorProvider,

        UserResourceProvider,

        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy},

        {provide: XHRBackend, useClass: DefaultXHRBackendProvider},

        RedirectorProvider,

        UserResourceProvider,

        PaymentResource,

        AccountResource,

        BankDraftResource,

        DonationResource,

        NumberFormatProvider,

        WpPostsProvider,

        AppConfigProvider,

        Network,

        NetworkCheckProvider,

        FileTransfer,

        FileChooser,

        TicketResourceProvider,

        ProductResourceProvider,

        ProductFilter,

        CartProvider,

        SaleResourceProvider,

        ApiConfigurationProvider,

        ProfileBankDraftResourceProvider,

        ConfigurationResourceProvider,

        BankDraftConfigResourceProvider,

        GeocodingApiProvider,

        RefundResourceProvider,

        MaskNumber,

        BanksResource,

        InstitutesResourceProvider,

        MaterialsResourceProvider,

        StatesResourceProvider,

        StatesResourceProvider,

        ProfileResourceProvider,

        MaterialsResourceProvider,

        ItemsResourceProvider

    ]

})

export class AppModule {

}

//     constructor(globalization: Globalization) {

//         globalization.getPreferredLanguage()

//             .then(res => console.log(res))

//             .catch(e => console.log(e));

//         globalization.getLocaleName()

//             .then(res => console.log(res))

//             .catch(e => console.log(e));

//     }

export function jwtOptionsFactory(authService) {

  return {

      tokenGetter: () => {

          return authService.getToken();

      },

  }

}

someone can help, ionic serve not return anything, only blank page without erros

my ionic info:

ionic info

Ionic:

   Ionic CLI                     : 6.11.8 (C:\Users\Fred\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.1.1
   @angular/cli                  : 10.1.1
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.2.0

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   NodeJS : v12.18.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.8
   OS     : Windows 10

How are you ensuring Storage is ready to do its job before you are trying to interact with it?

core.js:24128 Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:24128)
    at core.js:24139
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:24139)
    at new NgModuleFactory$1 (core.js:24236)
    at compileNgModuleFactory__POST_R3__ (core.js:27779)
    at PlatformRef.bootstrapModule (core.js:28017)
    at Module../src/main.ts (main.ts:11)
    at __webpack_require__ (bootstrap:84)
    at Object.0 (wp-posts.ts:16)
registerNgModuleType @ core.js:24128
(anonymous) @ core.js:24139
registerNgModuleType @ core.js:24139
NgModuleFactory$1 @ core.js:24236
compileNgModuleFactory__POST_R3__ @ core.js:27779
bootstrapModule @ core.js:28017
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:84
0 @ wp-posts.ts:16
__webpack_require__ @ bootstrap:84
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
:4200/assets/icon/favicon.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)

now return this error

  • you didn’t answer my question
  • you changed something, yet told nobody what you changed
  • somehow the “something” you changed caused a different error

The list of dependencies you posted earlier is extremely long, especially for a project that seemingly has never actually ever run. Is there any chance you purchased this code from somebody?

1 Like

yes i paid someone to create this project, but in ionic 3, today i migrate to ionic 5, not changed, only remove a filter in console, because this returned was a blank without errors, but now show this error., can you help me?

OK, then I would suggest asking that person for assistance.

already ask but this person is busy

i think could be some error in import, exports, declarations in module.ts files

this project have pipes and providers, i think some file have imports with some error

It does not seem fair to me to expect volunteers to effectively subsidize the profits of this person who is refusing to support their product, but perhaps somebody else will come along here that feels differently about that. Good luck.