Ionic build fail production

Ionic Framework ionic-v3
1

When I run “ionic cordova build android” it all works fine.
Altough when I am running “ionic cordova build android --prod --release” I get this error:

Error: Type ArticlePage in /Users/mtnptrsn/Webdev/24kalmar_app/src/pages/article/article.ts is part of the declarations of 2 modules: AppModule in /Users/mtnptrsn/Webdev/24kalmar_app/src/app/app.module.ts and ArticlePageModule in /Users/mtnptrsn/Webdev/24kalmar_app/src/pages/article/article.module.ts! Please consider moving ArticlePage in /Users/mtnptrsn/Webdev/24kalmar_app/src/pages/article/article.ts to a higher module that imports AppModule in /Users/mtnptrsn/Webdev/24kalmar_app/src/app/app.module.ts and ArticlePageModule in /Users/mtnptrsn/Webdev/24kalmar_app/src/pages/article/article.module.ts. You can also create a new NgModule that exports and includes ArticlePage in /Users/mtnptrsn/Webdev/24kalmar_app/src/pages/article/article.ts then import that NgModule in AppModule in /Users/mtnptrsn/Webdev/24kalmar_app/src/app/app.module.ts and ArticlePageModule in /Users/mtnptrsn/Webdev/24kalmar_app/src/pages/article/article.module.ts

What could be the issue?

2

The issue is right there in the error message:

3

I have tried to do exactly what is says but that doesnt work.

4

So ArticlePage isn’t declared in too many places?

5

My article.module.ts looks like this:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ArticlePage } from './article';

@NgModule({
  declarations: [
    ArticlePage,
  ],
  imports: [
    IonicPageModule.forChild(ArticlePage),
  ],
  exports: [
    ArticlePage
  ]
})
export class ArticlePageModule {}

and my app.module.ts looks like this:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Geolocation } from '@ionic-native/geolocation';
import { SocialSharing } from '@ionic-native/social-sharing';
import { NativeStorage } from '@ionic-native/native-storage';
import { Firebase } from '@ionic-native/firebase';

import { MyApp } from './app.component';
import { SiteSelectPage } from '../pages/site-select/site-select';
import { FeedPage } from '../pages/feed/feed';
import { ArticlePage } from '../pages/article/article';
import { SettingsPage } from '../pages/settings/settings';

@NgModule({
    declarations: [
        MyApp,
        SiteSelectPage,
        FeedPage,
        ArticlePage,
        SettingsPage
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp, {
            mode: 'md'
        })
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        SiteSelectPage,
        FeedPage,
        ArticlePage,
        SettingsPage
    ],
    providers: [
        StatusBar,
        SplashScreen,
        Geolocation,
        SocialSharing,
        NativeStorage,
        Firebase,
        {
            provide: ErrorHandler,
            useClass: IonicErrorHandler
        }
    ]
})
export class AppModule {}

That is the only places my ArticlePage is declared. Is that too many? If so, where should I NOT declare it?

6

The app module.

(Some words so Discourse accepts my post)

1 Like
7

When I exclude ArticlePage from my app module my app doesn’t start correctly. The splash screen appears and then just a white screen.

8

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console and network tabs for errors.

9

When I remove it from my app.module.ts declartions I get this error:

Unhandled Promise rejection: Component SiteSelectPage is not part of any NgModule or the module has not been imported into your module. ; Zone: <root> ; Task: Promise.then ; Value: Error: Component SiteSelectPage is not part of any NgModule or the module has not been imported into your module.

10

It seems like I have to declare the pages but I get an error when I do --prod. This is quite confusing.

11

Lazily loaded pages:

  • are always referred to by string literals in code when dealing with the navigation system
  • must be decorated with @IonicPage
  • must have a corresponding IonicPageModule
  • must not be declared in the app module

Eagerly loaded pages:

  • are always referred to by constructor (class name identifier) when dealing with navigation system
  • must not be decorated with @IonicPage
  • must be declared in the app module

You can mix and match both kinds of pages, but for each page you must follow one set of rules or the other completely.

4 Likes
12

Does that mean that I remove it from both declarations and entrycomponents?

13

If it’s lazily loaded, yes.

14

When I remove my Lazily Loaded pages from app.module.ts I get Runtime Error
Uncaught (in promise) Error: No component factory found for SiteSelectPage. Did you add it to @NgModule.entryComponents?

2 Likes
15

I am also facing the same problem will anyone help me to solve this issue