[SOLVED] Navbar menuToggle icon not showing after revert to Lazy Loading

Ionic Framework ionic-v3
1

I reverted an existing project (ionic 3) to lazy loading and now the navbar menuToggle icon is not showing up? Any ideas? The is just an white square where the icon should be (menu icon). Menu is working just fine, only the icon is missing?

2

Reply for my self and additional question? My menu is in app.html… Why do I feed this is why it’s not showing up the icon in lazy loading…? Do I have to make my menu a separated page in lazy loading for it to work properly?

3

[SOLVED]:

This was really weird. I finally found the problem. I had set font-family for the navbar icons in CSS and that somehow got broken, when I transferred my App to lazy loading. It was working before.

But now, when I commented out the font-family setting of navbar icon from CSS, icons are displayed again. I know I have to partly blaim myself, but sometimes there’s really weird shit going on in Ionic :slight_smile:

4

mine not showing anything when transform to lazy load.
im not changing any font family css.
all my ion icon is missing too.

revert back and it shown

what’s your package.json?

this is mine


 "@angular/common": "5.0.1",
    "@angular/compiler": "5.0.1",
    "@angular/compiler-cli": "5.0.1",
    "@angular/core": "5.0.1",
    "@angular/forms": "5.0.1",
    "@angular/http": "5.0.1",
    "@angular/platform-browser": "5.0.1",
    "@angular/platform-browser-dynamic": "5.0.1",
    "@ionic-native/android-permissions": "^4.6.0",
    "@ionic-native/app-version": "^4.6.0",
    "@ionic-native/badge": "^4.6.0",
    "@ionic-native/calendar": "^4.6.0",
    "@ionic-native/core": "^4.6.0",
    "@ionic-native/date-picker": "^4.6.0",
    "@ionic-native/header-color": "^4.6.0",
    "@ionic-native/in-app-browser": "^4.6.0",
    "@ionic-native/local-notifications": "^4.6.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/app-scripts": "^3.1.8",
    "@ionic/pro": "^1.0.20",
    "@ionic/storage": "2.1.3",
    "@types/node": "^9.6.1",
    "@types/promise.prototype.finally": "^2.0.2",
    "body-parser": "^1.18.2",
    "cordova-android": "6.3.0",
    "cordova-browser": "5.0.1",
    "cordova-ios": "4.5.4",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-badge": "^0.8.7",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-headercolor": "^1.0.0",
    "cordova-plugin-inappbrowser": "^2.0.2",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-local-notification": "^0.9.0-beta.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-whitelist": "^1.3.3",
    "cors": "^2.8.4",
    "express": "^4.16.3",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionic2-date-picker": "^1.1.2",
    "ionicons": "3.0.0",
    "morgan": "^1.9.0",
    "promise.prototype.finally": "^3.1.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "typescript": "2.4.2",
    "zone.js": "0.8.18"
  },
  "devDependencies": {},
  "description": "DXN HRMS",
  "cordova": {
    "plugins": {
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-headercolor": {},
      "cordova-plugin-datepicker": {},
      "cordova-plugin-file": {},
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-badge": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-statusbar": {}
    },

this is my page.module.ts


@NgModule({
  declarations: [
    SettingHomePage,
  ],
  imports: [
    IonicPageModule.forChild(SettingHomePage),
    ...AppModule.imports,
  ],
})
export class SettingHomePageModule {}


//appmodule.imports
export class AppModule {

  public static imports = [
    IonicModule,
    CommonModule,
    PipesModule,
    DatePickerModule,
    DirectivesModule,
    ComponentsModule
  ];
}
5

HAHAHA i’ve manage to solve it

i removed date-picker and calendar (i just removed it because i dont use it, dont know which one causing it)

its crazy you know. i wasted 5 hours for this. don’t know how much longer again if i dont try… hope help someone out there

npm rm *anyDatePicker*
npm rm *anyCalendar*

cordova plugin rm *anyDatePicker*
cordova plugin rm *anyCalendar*