Ionic 3 iOS build --prod Not Working: Declarations of 2 Modules Error

Question

I have ruthlessly tried to build my Ionic 3 app for production using several different methods.

Attempts

Firstly I imported enableProdMode from Angular and called enableProdMode in my app.component.ts constructor. In turn, I got a blank screen when I built the app.

I decided that this was an unnecessary step, as the Ionic Framework documentation suggested that I simply run ionic cordova build ios --prod to get a production build. In turn, I got the following errors.

Errors

After running the aforementioned line of code to build my app for production, I received this in the console output and my build was then terminated (condensed for legibility).

Type AvatarComponent in .../avatar.ts is part of the declarations of 2 modules: AppModule in .../app.module.ts and AvatarComponentModule in .../avatar.module.ts! Please consider moving AvatarComponent in .../avatar.ts to a higher module that imports AppModule in .../app.module.ts and AvatarComponentModule in .../avatar.module.ts.

Thus, I tried doing exactly what Cordova prompted me to do, so I removed my avatar.module.ts file and voila, the error was gone. To my dismay, this issue occurred for every single component in my project (keep in mind, every component was generated automatically through ionic g component). After repeating this process for every component, my app began loading with a blank screen just as it had done when I tried using enableProdMode.

Misc. Details

cli packages:

    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.2

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

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

System:

    Android SDK Tools : 26.0.1
    Node              : v8.6.0
    npm               : 5.4.2 
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b 

Misc:

    backend : legacy

Summary

I would like a way to mitigate the Type ___ in ___/__.ts is part of the declarations of 2 modules issue, as well as an explanation as to why this occurs despite my usage of the pre-installed generation method.

Feel free to ask for clarification. Thank you so much in advance!

Answer 1

In my case, the solution was to delete the .module.ts (ngModule file) from each component and page folder generated by Ionic. Then, I made sure the components from my app were listed as declarations in my app.module.ts file. The app compiled perfectly in production.

Here is how my folder structure for a sample component or page looks like now:

/examplecomponent
    /examplecomponent.html
    /examplecomponent.scss
    /examplecomponent.ts

Additionally, here is how my app.module.ts file imports these components:

import { ExampleComponent } from '../components/examplecomponent/examplecomponent';

@NgModule({
      declarations: [
            ExampleComponent
      ],
      imports: [
            IonicModule.forRoot(App),
            CloudModule.forRoot(cloudSettings),
            ElasticModule,
            BrowserModule,
            HttpModule
      ],
      bootstrap: [IonicApp],
      entryComponents: [
            MyApp,
            MainPage
      ],
      providers: [
            {provide: ErrorHandler, useClass: IonicErrorHandler},
            // All Injectable Classes Go Here
            Alert,
            Analytics,
            Auth,
            Background
      ]
})
export class AppModule {}

If your issue persists, see Philip Brack's Solution.