Error: Cannot determine the module for class OverlayPortal in --prod

Viewed 8538

i am not sure i am facing an issue only with ionic cordova run android --prod and my ionic cordova run android works fine.

ERROR:

Error: Cannot determine the module for class OverlayPortal in /Users/gopi/Documents/bos/hybrid-app/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 /Users/gopi/Documents/bos/hybrid-app/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 /Users/gopi/Documents/bos/hybrid-app/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 Slides in /Users/gopi/Documents/bos/hybrid-app/node_modules/ionic-angular/es2015/components/slides/slides.d.ts! Add Slides to the NgModule to fix it.

Can some one give me clear explaination:

Here is my ionic info

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

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 1.3.8
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.4.2

System:

Android SDK Tools : 25.2.5
Node              : v6.11.1
npm               : 3.10.10
OS                : macOS Sierra
Xcode             : Xcode 8.3.2 Build version 8E2002
12 Answers

I finally found a fix for this. I had a few imports from ionic-angular that imported the nested component directly as opposed to importing from the top-level package export. I'm guessing the prod AOT compiler didn't like having some imports from the top-level and some directly to the nested item. An example for me is below. My guess is you could choose either one of these approaches, but when mixing them the AOT compiler won't be happy.

Good

import { LoadingController } from 'ionic-angular';

Bad

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

This will help you to solve this issue.

https://stackoverflow.com/a/55832874/849870

i solve my problem. in my project i was using an outdated module, ion-datepicker if you are also using same issue, here are some steps, you can follow and find your infected or outdated module.

1. Step one:

in your project find in all files from 'ionic-angular/ word,

2. Step Two:

if you find this word like import { xyz } from 'ionic-angular/xyz/abc'

update or remove that module.

This solution worked for me. After you install all your components with npm i, install alone typescript version 2.8.1

npm install typescript@2.8.1

run build again

As suggested here, remove Page interface reference. Change

let page: Page;

to

let page;

1) Search "Page" occurrences in your project and remove it.

Using Ubuntu or Mac terminal for quick search by taping :

> grep -r ": Page" src/*
//then
> grep -r ":Page" src/*

Remove it like this:

//let page:Page;
//becomes 
let page;
//and remove the import in the top of the file

2) Search "ionic-angular/xxxxxx" occurrences in your project and remove it.

grep -r "from \'ionic-angular\/" src/*

If you are using "ionic-angular/xxxxxx" you have to change it to "ionic-angular" only go in the Ionic documentation and check your component:

https://ionicframework.com/docs/v3/components/#overview

I had the same issue then i changed my one of the ionic angular imports address. previous it was

import { AlertController } from "ionic-angular\umd\components\alert"

and i changed it to

import { AlertController } from "ionic-angular"

now its working for me.

In my case it was because I had backup of a module, i had

MyModule
|- MyModule.ts -> class MyModule {}
MyModuleOld
|- MyModule.ts -> class MyModule {}

I had this error after installing Diagnostic with

npm install --save @ionic-native/diagnostic@4

I revert back my package.json then remove and add android platform updated with

ionic cordova platform rm android && ionic cordova platform add android@latest

And it's solved.

--prod compile using aot. However, if you want to compile just for release use only --release flag but you loose out of the features of aot

In my case, it was a Pipe I had created (lets name it "CustomPipe") and that I wasn't using so I hadn't declared it in my PipesModule. I had 4 pipes, 3 of which I was using and declaring and exporting in PipesModule. But "CustomPipe" wasn't declared anywhere, so when I ran ionic cordova build android --prod I got the following error:

ERROR in : Cannot determine the module for class CustomPipe in .../app/pipes/custom.pipe.ts! Add CustomPipe to the NgModule to fix it.

Since I wasn't using it, I just deleted it and it worked fine.

here is a fix that worked for me.

in app.module.ts, add this:

import { OverlayPortal } from 'ionic-angular/components/app/overlay-portal';
import { ClickBlock } from 'ionic-angular/components/app/click-block';
import {IonicApp as IonicAppRoot} from 'ionic-angular/components/app/app-root';

...


declarations: [
    ...

    OverlayPortal,
    IonicAppRoot,
    ClickBlock,
  ],

None of the solutions above worked for me, but I finally solved it.

Simply imported {OverlayPortal} into app.module.ts as typescript toldme to do AND modified the url.

import { OverlayPortal } from "../../node_modules/ionic-angular/components/app/overlay-portal.d";

Then added it to "declarations" in NgModule

@NgModule({
  declarations: [
     OverlayPortal

Then run ionic capacitor build android --prod again and the error was gone.

Related