Ionic 2 : — prod file not compiling Error: build prod failed: Cannot determine the module for class HomePage

Question

I'm trying to build a project with --prod flag It throws an error

 build prod failed: Cannot determine the module for class HomePage

Normal build is working ionic cordova build android

Previously about a week ago it was working good. Here is package.json file

{
  "name": "io.cordova.myapp882994",
  "author": "",
  "homepage": "",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "watch": "ionic-app-scripts watch"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.3",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic-native/app-minimize": "^4.2.1",
    "@ionic-native/call-number": "^4.3.2",
    "@ionic-native/core": "^3.6.1",
    "@ionic-native/diagnostic": "^4.5.2",
    "@ionic-native/fcm": "^4.5.2",
    "@ionic-native/geolocation": "^4.1.0",
    "@ionic-native/local-notifications": "^4.5.2",
    "@ionic-native/native-storage": "^4.1.0",
    "@ionic-native/network": "^4.3.1",
    "@ionic-native/open-native-settings": "^4.3.1",
    "@ionic-native/push": "^4.5.2",
    "@ionic-native/secure-storage": "^4.1.0",
    "@ionic-native/splash-screen": "^4.2.0",
    "@ionic/storage": "^1.1.9",
    "call-number": "^1.0.1",
    "cordova-android": "6.3.0",
    "cordova-ios": "4.2.0",
    "cordova-open-native-settings": "^1.4.1",
    "cordova-plugin-app-event": "~1.2.1",
    "cordova-plugin-appminimize": "~1.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-crosswalk-webview": "~2.4.0",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-geolocation": "~2.4.3",
    "cordova-plugin-nativestorage": "~2.2.2",
    "cordova-plugin-network-information": "^1.3.3",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "2.2.1",
    "cordova-plugin-whitelist": "1.3.1",
    "cordova-windows": "4.4.2",
    "cordova.plugins.diagnostic": "^3.9.1",
    "de.appplant.cordova.plugin.local-notification": "^0.8.5",
    "ionic-angular": "2.0.1",
    "ionic-native": "2.4.1",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionic2-rating": "^1.2.2",
    "ionicons": "3.0.0",
    "mx.ferreyra.callnumber": "~0.0.2",
    "phonegap-plugin-push": "~2.1.2",
    "rxjs": "5.0.0-beta.12",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.0",
    "typescript": "2.0.9"
  },
  "description": "Ionic2Blank: An Ionic project",
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "-vs-binding": {
    "BeforeBuild": [
      "ionic:build"
    ]
  },
  "cordova": {
    "platforms": [
      "ios",
      "windows",
      "android"
    ],
    "plugins": {
      "cordova-plugin-appminimize": {},
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-geolocation": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-network-information": {},
      "cordova-open-native-settings": {},
      "mx.ferreyra.callnumber": {},
      "de.appplant.cordova.plugin.local-notification": {},
      "cordova-plugin-compat": {},
      "cordova-plugin-app-event": {},
      "cordova.plugins.diagnostic": {},
      "cordova-plugin-crosswalk-webview": {
        "XWALK_VERSION": "23+",
        "XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
        "XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
        "XWALK_MODE": "embedded",
        "XWALK_MULTIPLEAPK": "true"
      },
      "phonegap-plugin-push": {
        "SENDER_ID": "XXXXXXXXXXXX"
      }
    }
  }
}

Cordova Cli : 7.1.0 cordova android platform : 6.3.0. Gone through lots of google links but I cant get a proper solution for this.

app.module.ts file

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler, NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { AppMinimize } from '@ionic-native/app-minimize';
import { OpenNativeSettings } from '@ionic-native/open-native-settings';

import { MyApp } from './app.component';
import { loginPage } from '../pages/login/login';
import { loginService } from '../providers/loginservice/loginservice';
import { dashboardPage } from '../pages/dashboard/dashboard';
import { ActivitiesPage } from '../pages/activities/activities';
import { ActiveService } from '../providers/activeServices/activeServices';
import { locationCompleteService } from '../providers/locationService/locationCompleteService'; 
import { locationUpcomingService } from '../providers/locationService/locationUpcomingService';

import { InvoicePage } from '../pages/invoice/invoice';
import { invoiceService } from '../providers/invoiceService/invoiceService';
import { feedbackPage } from '../pages/feedback/feedback';
import { UpComingService } from '../providers/UpcomingService/upcomingActivityService';
import { Helper } from '../pages/Helper';
import { FeedbackService } from '../providers/feedbackService/FeedbackService';

import { samplePage } from '../pages/sample/sample';
import { locationUpdatePage } from '../pages/locationUpdate/locationUpdate'
import { locationService } from '../providers/locationupdateservice/locationservice';
import { locationUpdate } from '../providers/locationupdateservice/locationUpdate';

import { scopeofworkPage } from '../pages/scopeofwork/scopeofwork'
import { scopeofworkservice } from '../providers/scopeofwork/scopeofworkservice';

import { SchedulePage } from '../pages/Schedule/Schedule';
import { waypointPage } from '../pages/waypoint/waypoint';
import { Ionic2RatingModule } from 'ionic2-rating';
import { ScheduleService } from '../providers/scheduleService/scheduleService';

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

import { userPrevilages } from '../userPrevilages';
import { CallNumber } from '@ionic-native/call-number';
import { otService } from '../providers/otservice/otService';
import { Push, PushObject, PushOptions } from '@ionic-native/push';
import { pushNotificationService } from '../providers/pushnotificationService/pushNotificationService';
import { LocalNotifications } from '@ionic-native/local-notifications';
import { Diagnostic } from '@ionic-native/diagnostic';

@NgModule({
    declarations: [
        MyApp,
        dashboardPage,
        loginPage,
        ActivitiesPage,
        InvoicePage,
        feedbackPage,
        samplePage,
        locationUpdatePage,
        scopeofworkPage,
        SchedulePage,
        waypointPage
    ],
    imports: [
        IonicModule.forRoot(MyApp),
        Ionic2RatingModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        loginPage,
        dashboardPage,
        ActivitiesPage,
        InvoicePage,
        feedbackPage,
        samplePage,
        locationUpdatePage,
        scopeofworkPage,
        SchedulePage,
        waypointPage   
    ],
    providers:
    [
        Helper,
        loginService,
        Geolocation,
        UpComingService,
        ActiveService,
        locationCompleteService,
        FeedbackService,
        locationService,
        locationUpdate,
        invoiceService,
        scopeofworkservice,
        ScheduleService,
        NativeStorage,
        OpenNativeSettings,
        userPrevilages,
        CallNumber,
        otService,
        Push,
        pushNotificationService,
        LocalNotifications,
        Diagnostic,

        Diagnostic,
        {
            provide: ErrorHandler, useClass: IonicErrorHandler
        },
        SplashScreen,
        AppMinimize
    ]
})
export class AppModule {}

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, ToastController, LoadingController, AlertController, NavController, IonicApp } from 'ionic-angular';
import { StatusBar, Splashscreen, Network } from 'ionic-native';
import { AppMinimize } from '@ionic-native/app-minimize';
import { HomePage } from '../pages/home/home';
import { loginPage } from '../pages/login/login';

import { Helper } from '../pages/Helper';

import { Diagnostic } from 'ionic-native';
import { Observable } from "rxjs/Observable";

declare var navigator: any;
declare var Connection: any;

@Component({
    templateUrl: 'app.html',
    selector: 'app',    
})

export class MyApp  {
    @ViewChild(Nav) nav: Nav;
    rootPage: any;

    constructor(public platform: Platform, public help: Helper) {
        this.initializeApp();
    }

    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();
            this.rootPage = loginPage;
        });
    }
}

Any Suggestion?

Answer 1

You must add your HomePage to the declarations and entryComponents in app.module.ts

declarations: [
    MyApp,
    HomePage,
    ...
  ],
  ....
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ...
  ],

You may also need to add other pages that are not lazy-loaded. Pages that are lazy-loaded (pages that have there own module), do not need to be added here.

Answer 2

Found the Solution

As @Sébastien Mentioned to add the pages I did, but I'm not using the HomePage So I removed the page from the project. For latest Angular version the AOT compiler scans the whole project folder, so it is getting confused which classes are used and which are not. I added the files to declaration part after that it throws an error to add the template.

For every Component, I added the below code

@Component({
    selector: 'DbLoginService',
    template: '<span></span>'
})

That's it.

@Sébastien your answer is valuable