npm run ionic:build --prod giving strange error

问题:

When I am trying to run npm run ionic:build --prod, it is giving me below errors:

Error: Cannot determine the module for class OverlayPortal in F:/D/IONIC/quicktask/quicktask-web-froala/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 F:/D/IONIC/quicktask/quicktask-web-froala/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 F:/D/IONIC/quicktask/quicktask-web-froala/node_modules/ionic-angular/umd/components/app/click-block.d.ts! Add ClickBlock to the NgModule to fix it. Cannot determine the module for class Slides in F:/D/IONIC/quicktask/quicktask-web-froala/node_modules/ionic-angular/umd/components/slides/slides.d.ts! Add Slides to the NgModule to fix it.

Now if I try to include it in app.module.ts using below code:

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

@NgModule({
  declarations: [
    OverlayPortal, //for aot compilation

on doing ionic serve the error I get after is -

Module build failed: Error: ENOENT: no such file or directory, open 'F:\D\IONIC\quicktask\quicktask-web-froala\node_modules\ionic-angular\umd\components\app\overlay-portal.d.js' at Error (native)

What do I do to build using --prod and run using ionic-serve without any bug.

Edit

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { App, NavController,  IonicErrorHandler, IonicModule,IonicApp } from 'ionic-angular'; // removed IonicApp from here

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { LoginPage } from '../pages/login/login';
import { NewtaskPage } from '../pages/newtask/newtask';
//import { DashboardPage } from '../pages/dashboard/dashboard';
import { TaskgivenPage } from '../pages/taskgiven/taskgiven';
import { MytaskPage } from '../pages/mytask/mytask';

import { CommunicationPage } from '../pages/communication/communication';


import { CommunicationgivenPage } from '../pages/communicationgiven/communicationgiven';
import { CommunicationreportPage } from '../pages/communicationreport/communicationreport';
import { GivencommunicationclosedPage } from '../pages/givencommunicationclosed/givencommunicationclosed';

import { TestPage } from '../pages/test/test';
import { LogoutPage } from '../pages/logout/logout';
import { MyclosedtaskPage } from '../pages/myclosedtask/myclosedtask';
import { GivenclosedtaskPage } from '../pages/givenclosedtask/givenclosedtask';
import { ReporttoPage } from '../pages/reportto/reportto';
import { SlidePage } from '../pages/slide/slide';


import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
//import { Firebase } from '@ionic-native/firebase';
import { SpeechRecognition } from '@ionic-native/speech-recognition';


import { Headers, Http, HttpModule ,Response } from '@angular/http';
import { IonicStorageModule } from '@ionic/storage';

import { TimeAgoPipe } from 'time-ago-pipe';

import {Commopen} from '../pages/givencommunicationclosed/commopen';
import { Userimage } from '../pages/dashboard2/userimage';

import { MycommclosedPage } from '../pages/mycommclosed/mycommclosed';
import { Dashboard2Page } from '../pages/dashboard2/dashboard2';
import { MytaskuserwisePage } from '../pages/mytaskuserwise/mytaskuserwise';
import  { ProfilePage } from '../pages/profile/profile';
import { PaymentPage } from '../pages/payment/payment';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { InfoPage } from '../pages/info/info';
import { PerformancePage } from '../pages/performance/performance';
import { PopoverPage } from '../pages/communicationgiven/popover';
import { Updatepopup} from '../pages/communicationgiven/updatepopup';
import { TimelinePage } from '../pages/timeline/timeline';
import { Commpopup } from '../pages/timeline/commpopup';
import {SearchPage} from '../pages/search/search';
import {SuggestionPage} from '../pages/suggestion/suggestion';
import {Mytaskpopup} from '../pages/mytask/mytaskpopup';
import {Userwisepopup} from '../pages/mytaskuserwise/userwisepopup';
import {Taskgivenpopup} from '../pages/taskgiven/taskgivenpopup';
import {Reportpopup} from '../pages/reportto/reportpopup';
import {FollowerPage} from '../pages/follower/follower';
import {CommfollowerPage} from '../pages/commfollower/commfollower';
import { CommPage } from '../pages/comm/comm';
import {ReportsPage} from '../pages/reports/reports';
import { DashmodalPage } from '../pages/dashmodal/dashmodal';
import { Dashmodal1Page } from '../pages/dashmodal1/dashmodal1';
import { LabelPage } from '../pages/label/label';
import { SortPage } from '../pages/sort/sort';
import { SortuserwisePage } from '../pages/sortuserwise/sortuserwise';
import { LastseenPage } from '../pages/lastseen/lastseen';
import { MemolistPage } from '../pages/memolist/memolist';
import { OfcmemoPage } from '../pages/ofcmemo/ofcmemo';
import { CommadminPage } from '../pages/commadmin/commadmin';
import { AdminpcPage } from '../pages/adminpc/adminpc';

import {AiPage} from '../pages/ai/ai';
import { Autosize } from '../directives/autosize/autosize';

// Import Froala Editor.
import "froala-editor/js/froala_editor.pkgd.min.js";
import { NoSanitizePipe } from '../pipes/no-sanitize/no-sanitize';

// Import Angular2 plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import {Nl2BrPipeModule} from 'nl2br-pipe';
import {LinkyModule} from 'angular-linky';

//Search
import { SelectSearchableModule } from 'ionic-select-searchable';

// for ionic build --prod errors or aot compilation
// import { OverlayPortal } from '../../node_modules/ionic-angular/umd/components/app/overlay-portal.d';
//import { IonicApp } from '../../node_modules/ionic-angular/umd/components/app/app-root.d';
//import { ClickBlock } from '../../node_modules/ionic-angular/umd/components/app/click-block.d';
//import { Slides } from '../../node_modules/ionic-angular/umd/components/slides/slides.d';
import { FilterArrayPipe } from '../pages/dashboard2/filterpipe';
import {IonicPage, NavParams, Slides} from 'ionic-angular';

@NgModule({
  declarations: [
  //  OverlayPortal, //for aot compilation
 //   IonicApp , //for aot compilation for app-root.d
  //  ClickBlock, //for aot compilation
  //  Slides, //for aot compilation
  IonicApp,
    FilterArrayPipe, //for aot compilation
    TimeAgoPipe,
    MyApp,
    HomePage,
    ListPage,
    LoginPage,
    NewtaskPage,
   // DashboardPage,
    TaskgivenPage,
    MytaskPage,
    CommunicationPage,
    CommunicationgivenPage,
CommunicationreportPage,
GivencommunicationclosedPage,    
    TestPage,
    LogoutPage,
    MyclosedtaskPage,
    GivenclosedtaskPage,
    ReporttoPage,
    Dashboard2Page,
    MytaskuserwisePage,
    MycommclosedPage,
    ProfilePage,
    PaymentPage,
    InfoPage,
    SlidePage,
    PerformancePage ,
    PopoverPage,
    Updatepopup,
    SearchPage,
    TimelinePage,
    Commpopup,
    SuggestionPage,
    Mytaskpopup,
    Userwisepopup,
    Taskgivenpopup,
    Reportpopup,
    AiPage,
    Autosize,
    NoSanitizePipe,
    FollowerPage,
    CommfollowerPage,
    CommPage,
    ReportsPage,
    DashmodalPage,
    Dashmodal1Page,
    LabelPage,
    SortPage,
    SortuserwisePage,
    LastseenPage,
    MemolistPage,
    OfcmemoPage,
    CommadminPage,
    AdminpcPage,
    //OverlayPortal
  ],
  imports: [
    BrowserModule,
    HttpModule,
    Nl2BrPipeModule,
    LinkyModule,
    SelectSearchableModule,
    IonicModule.forRoot(MyApp),
    FroalaEditorModule.forRoot(),
    FroalaViewModule.forRoot(),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    LoginPage,
    NewtaskPage,
   // DashboardPage,
    TaskgivenPage,
    MytaskPage,
    CommunicationPage,
    CommunicationgivenPage,
    CommunicationreportPage, 
    GivencommunicationclosedPage,
    TestPage,
    LogoutPage,
    MyclosedtaskPage,
    GivenclosedtaskPage,
    ReporttoPage,
    Dashboard2Page,
    MytaskuserwisePage,
    MycommclosedPage,
    ProfilePage,
    PaymentPage,
    InfoPage,
    SlidePage,
    PerformancePage,
    PopoverPage,
    Updatepopup,
    SearchPage,
    TimelinePage,
    Commpopup,
    SuggestionPage,
    Mytaskpopup,
    Userwisepopup,
    Taskgivenpopup,
    Reportpopup,
    AiPage,
    FollowerPage,
    CommfollowerPage,
    CommPage,
    ReportsPage,
    DashmodalPage,
    Dashmodal1Page,
    LabelPage,
    SortPage,
    SortuserwisePage,
    LastseenPage,
    MemolistPage,
    OfcmemoPage,
    CommadminPage,
    AdminpcPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    //Firebase,
    Commopen,
    GivenclosedtaskPage,
    Userimage,
    InAppBrowser,
    SpeechRecognition,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

回答1:

The file you are using to import is the type definitions file with the extension .d.js.

You should import from the .ts file instead. Check the folder and you should get it

回答2:

I ran into this same error. For me it was due to inconsistent Ionic imports (some from top-level ionic-angular, and some importing directly from the component, e.g. ionic-angular/components/loading/loading-controller).

https://stackoverflow.com/a/50858210/6599076

回答3:

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 that module.

If no update available then you can remove that module

npm uninstall ion-datepicker(or your defected module)

After this you needs to remove that module from app.module.ts and where ever you are using remove from there, after that you can try

ionic cordova build android --prod --release