Cannot determine the module for class IonicApp command: ionic cordova build <platform> --prod --release failure

Hi,

My application build with no problems without --prod --release options but I’m facing an issue when building my application for production using the following command:

ionic cordova buil <platform> --prod --release

Build failed with the following message:

...
[10:34:17]  deeplinks started ...
[10:34:19]  deeplinks finished in 1.49 s
[10:34:19]  ngc started ...
Error: Cannot determine the module for class Button in <...>/node_modules/ionic-angular/es2015/components/button/button.d.ts! Add Button to the NgModule to fix it.
Cannot determine the module for class Icon in <...>/node_modules/ionic-angular/es2015/components/icon/icon.d.ts! Add Icon to the NgModule to fix it.
Cannot determine the module for class Label in <...>/node_modules/ionic-angular/es2015/components/label/label.d.ts! Add Label to the NgModule to fix it.
Cannot determine the module for class OverlayPortal in <...>/node_modules/ionic-angular/es2015/components/app/overlay-portal.d.ts! Add OverlayPortal to the NgModule to fix it.
Cannot determine the module for class IonicApp in <...>/node_modules/ionic-angular/es2015/components/app/app-root.d.ts! Add IonicApp to the NgModule to fix it.
Cannot determine the module for class ClickBlock in <...>/node_modules/ionic-angular/es2015/components/app/click-block.d.ts! Add ClickBlock to the NgModule to fix it.
Cannot determine the module for class Content in <...>/node_modules/ionic-angular/es2015/components/content/content.d.ts! Add Content to the NgModule to fix it.
Cannot determine the module for class ItemReorder in <...>/node_modules/ionic-angular/es2015/components/item/item-reorder.d.ts! Add ItemReorder to the NgModule to fix it.
Cannot determine the module for class Item in <...>/node_modules/ionic-angular/es2015/components/item/item.d.ts! Add Item to the NgModule to fix it.
    at syntaxError (<...>/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
    at analyzeAndValidateNgModules (<...>/node_modules/@angular/compiler/bundles/compiler.umd.js:24301:15)
    at AotCompiler.analyzeModulesAsync (<...>/node_modules/@angular/compiler/bundles/compiler.umd.js:23932:46)
    at CodeGenerator.codegen (<...>/node_modules/@angular/compiler-cli/src/codegen.js:32:14)
    at Function.NgTools_InternalApi_NG_2.codeGen (<...>/node_modules/@angular/compiler-cli/src/ngtools_api.js:73:30)
    at Object.doCodegen (<...>/node_modules/@ionic/app-scripts/dist/aot/codegen.js:6:51)
    at <...>/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:42:30
    at <anonymous>

ionic info command give the following output:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.15.2
    ionic (Ionic CLI) : 3.15.2

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    ios-deploy : 1.9.0
    Node       : v8.6.0
    npm        : 5.3.0
    OS         : macOS Sierra
    Xcode      : Xcode 9.0.1 Build version 9A1004

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Here’s my app.module.ts


//...
// Components
import { ComponentsModule } from '../components/components.module';

// App component
import { MyApp } from './app.component';

//...



@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    ComponentsModule,
    BrowserModule,
    HttpModule,
    IonicStorageModule.forRoot(),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    OpenNativeSettings,
    CallNumber,
    Camera,
    File,
    Geolocation,
    ...
  ]  

})
export class AppModule {}

Do you know how to solve this issue ?

3 Likes

Exactly same problem here, any suggestion?

You should upgrade this to a recent version.

Seems to be not related in my case.

My environement infos

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.4
    Cordova Platforms  : android 6.3.0 ios 4.5.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    Node       : v8.9.1
    npm        : 5.5.1 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

Here’s my app package.json

{
  "name": "myApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/calendar": "^4.3.3",
    "@ionic-native/camera": "^4.3.2",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/device": "^4.3.1",
    "@ionic-native/file": "^4.1.0",
    "@ionic-native/file-transfer": "^4.1.0",
    "@ionic-native/image-picker": "^4.3.2",
    "@ionic-native/push": "^4.3.0",
    "@ionic-native/social-sharing": "^4.2.1",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/sqlite": "^4.1.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic-native/toast": "^4.1.0",
    "@ionic/storage": "2.1.3",
    "@types/cryptojs": "^3.1.29",
    "cordova-android": "6.3.0",
    "cordova-ios": "4.5.3",
    "cordova-plugin-calendar": "^4.6.0",
    "cordova-plugin-camera": "^2.4.1",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-console": "^1.1.0",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-file": "^4.3.3",
    "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-statusbar": "^2.3.0",
    "cordova-plugin-telerik-imagepicker": "^2.1.8",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.2.1",
    "cordova-sqlite-storage": "^2.1.2",
    "crypto-js": "^3.1.9-1",
    "es6-promise-plugin": "^4.1.0",
    "ionic-angular": "3.9.2",
    "ionic-image-loader": "^4.1.1",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "ng-lazyload-image": "^3.3.1",
    "phonegap-plugin-push": "^2.1.1",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.1.4",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-ionic-webview": {},
      "phonegap-plugin-push": {
        "FCM_VERSION": "11.0.1"
      },
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": " ",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-file": {},
      "cordova-plugin-calendar": {
        "CALENDAR_USAGE_DESCRIPTION": "This app uses the user calendar to insert app related events and memos"
      }
    },
    "platforms": [
      "ios",
      "android"
    ]
  }
}

The error:

MinidiFrancesco:marchiapp Francesco$ ionic cordova build android --prod
Running app-scripts build: --prod --platform android --target cordova
[17:22:29]  build prod started ... 
[17:22:29]  clean started ... 
[17:22:29]  clean finished in 2 ms 
[17:22:29]  copy started ... 
[17:22:29]  deeplinks started ... 
[17:22:29]  deeplinks finished in 253 ms 
[17:22:29]  ngc started ... 
[17:22:34]  typescript error 
            Cannot determine the module for class OverlayPortal in 
            /Users/Francesco/Apps/marchiapp/node_modules/ionic-angular/umd/components/app/overlay-portal.d.ts! Add 
            OverlayPortal to the NgModule to fix it. Cannot determine the module for class IonicApp in 
            /Users/Francesco/Apps/marchiapp/node_modules/ionic-angular/umd/components/app/app-root.d.ts! Add IonicApp to 
            the NgModule to fix it. Cannot determine the module for class ClickBlock in 
            /Users/Francesco/Apps/marchiapp/node_modules/ionic-angular/umd/components/app/click-block.d.ts! Add 
            ClickBlock to the NgModule to fix it. 

Error: The Angular AoT build failed. See the issues above
    at /Users/Francesco/Apps/marchiapp/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:237:55
    at step (/Users/Francesco/Apps/marchiapp/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23)
    at Object.next (/Users/Francesco/Apps/marchiapp/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53)
    at fulfilled (/Users/Francesco/Apps/marchiapp/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58)
    at <anonymous>
[17:22:34]  copy finished in 5.11 s 

Which is totally different from the original post you hijacked. Please open a new topic.

Having the same problem, here, disabled AOT also, still getting the same error

Yes, sorry for my oot, i solved my problem simply avoiding declaration of a variable as “Page” interface.
So, instead of:

let page : Page;

using

let page;

the AOT compiler does not encounter errors.
I think it is an anomalous behavior to report.

1 Like

I have this exact same issue:

typescript error 
            Cannot determine the module for class OverlayPortal in 
            /Users/Francesco/Apps/marchiapp/node_modules/ionic-angular/umd/components/app/overlay-portal.d.ts! Add 
            OverlayPortal to the NgModule to fix it. Cannot determine the module for class IonicApp in 
            /Users/Francesco/Apps/marchiapp/node_modules/ionic-angular/umd/components/app/app-root.d.ts! Add IonicApp to 
            the NgModule to fix it. Cannot determine the module for class ClickBlock in 
            /Users/Francesco/Apps/marchiapp/node_modules/ionic-angular/umd/components/app/click-block.d.ts! Add 
            ClickBlock to the NgModule to fix it. 

How did you solve it?

Best,

After line by line inspection i found the problem on this declaration:

let page : Page;

as specified before, i resolved using:

let page;

Hope helps

Same here did you solve it ?

1 Like

Also having the same problem. Ours might be different we are trying to have some shared components. I’m getting this error with components the current app doesn’t need. It seems like its trying to include them?

Cannot determine the module for class PhoneNumberMask in
/home/user/dev/Ionic-App/apps/shared/services/phone-mask.pipe.ts! Add PhoneNumberMask to the NgModule to fix
it.

Create ac module file for this pipe

Yeah realized the pipe went through different files. The one file used for the one app didn’t have it setup correctly.
If you do get this error, it means that the file has not be setup correctly in some module file somewhere.
The joy of angular is including all of these modules and trying to trace down which one is causing the problem.

For us we had one login page for multiple apps. Depending on the app a different home page would show up. Because of the way AOT works, it included login, which needed both home pages and all the components on the home page. Even the home page from the other app had to be included. Not ideal. But GO modules!

I was getting similar OverlayPortal, IonicApp, and ClickBlock errors when running prod android builds. In my case it was caused by inconsistent Ionic importing. See below for more details:

I’m getting the exact same error. I’ve checked all my imports and can’t find anything wrong with them.

My app is quite large (70+ pages, 40+ providers, plus pipes, and dozens of custom components etc) and finding it difficult to pinpoint what is causing the build error. My only regret is not periodically running ionic build --prod while developing my app to catch problems early on.

Does anyone know if there’s any options I can pass to the build which might help me identify the root cause of the error? At the moment, it’s like looking for a needle in a haystack as all I get it this:

[12:07:04]  typescript error 
            Cannot determine the module for class OverlayPortal in 
            /Users/Jay/Dev/app/mobile/seeker/node_modules/ionic-angular/components/app/overlay-portal.d.ts! Add 
            OverlayPortal to the NgModule to fix it. Cannot determine the module for class IonicApp in 
            /Users/Jay/Dev/app/mobile/seeker/node_modules/ionic-angular/components/app/app-root.d.ts! Add IonicApp 
            to the NgModule to fix it. Cannot determine the module for class ClickBlock in 
            /Users/Jay/Dev/app/mobile/seeker/node_modules/ionic-angular/components/app/click-block.d.ts! Add 
            ClickBlock to the NgModule to fix it.

Hello,
the error says overlayportal is not added to ngmodule. Take a look to your ngmodule’s that overlayportal is added, depending to eager or lazy loading, with correct upperlower cases. If you are sure there is nothing wrong, then stop ionic serve, delete content of www folder, delete content of .sourcemaps and do ionic serve again.

Best regards, anna-liebt

Hi Anna,

Thanks for your suggestions. I tried deleting the www folder and sourcemaps but the problem still persists - I even deleted node_modules and re-install. I’ve checked all my files for suspicious imports (including case of names). However, the problem still persists.

I’m not actually using OverlayPortal anywhere and therefore does not need to be imported, which is why the error is very frustrating to solve.

Ionic serve works fine, it’s only when I try to build for production I encounter the problem:

15:28 $ ionic build --prod
Running app-scripts build: --prod
[15:28:37]  build prod started ... 
[15:28:37]  clean started ... 
[15:28:37]  clean finished in 3 ms 
[15:28:37]  copy started ... 
[15:28:38]  deeplinks started ... 
[15:28:38]  deeplinks finished in 189 ms 
[15:28:38]  ngc started ... 
[15:28:48]  typescript error 
            Cannot determine the module for class OverlayPortal in 
            /Users/Jay/Dev/app/mobile/seeker/node_modules/ionic-angular/components/app/overlay-portal.d.ts! Add 
            OverlayPortal to the NgModule to fix it. Cannot determine the module for class IonicApp in 
            /Users/Jay/Dev/app/mobile/seeker/node_modules/ionic-angular/components/app/app-root.d.ts! Add IonicApp 
            to the NgModule to fix it. Cannot determine the module for class ClickBlock in 
            /Users/Jay/Dev/app/mobile/seeker/node_modules/ionic-angular/components/app/click-block.d.ts! Add 
            ClickBlock to the NgModule to fix it. 

Error: The Angular AoT build failed. See the issues above
    at /Users/Jay/Dev/app/mobile/seeker/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:237:55
    at step (/Users/Jay/Dev/app/mobile/seeker/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23)
    at Object.next (/Users/Jay/Dev/app/mobile/seeker/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53)
    at fulfilled (/Users/Jay/Dev/app/mobile/seeker/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58)
    at <anonymous>

Angular’s aot compiler doesn’t give any help on the source of the problem :frowning:

Just to be sure, have you searched your code for below (including the trailing slash)

ionic-angular/

If you’re having the same issue I had, that would point you at any imports that are from the ionic-angular package but are pulling them in directly from the nested component. As that SO link above noted, the example I had was:

Good

import { LoadingController } from 'ionic-angular';

Bad

import { LoadingController } from 'ionic-angular/components/loading/loading-controller';

2 Likes

Hello,
does overlay-portal.d.ts exist anywhere?
A full search doesn’t find any result?

Best regards, anna-liebt

Hi Anna,

I’ve searched the src folder:

egrep -rl "(overlay-portal)|(OverlayPortal)" .

However, no files are found. The only place I can find this is in node_modules:

./node_modules/ionic-angular/es2015/components/app/

Puzzling.