Problem with "declarations of 2 modules"


#1

I am quiet new with ionic and the app can run on anrdroid
also this will work if i run ionic serve -l
However when i running following command
cordova build ios --prod


here is my code on app.modules.ts

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

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { WalkieTalkiePage } from '../pages/walkie-talkie/walkie-talkie';
import { StoryLibraryPage} from '../pages/story-library/story-library';

import {StreamingMedia} from '@ionic-native/streaming-media';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    WalkieTalkiePage,
    StoryLibraryPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    WalkieTalkiePage,
    StoryLibraryPage
  ],
  providers: [
    StreamingMedia,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

and here is my code of story-library.modules

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { StoryLibraryPage } from './story-library';

@NgModule({
  declarations: [
    StoryLibraryPage,
  ],
  imports: [
    IonicPageModule.forChild(StoryLibraryPage),
  ],
})
export class StoryLibraryPageModule {}

#2

The error describes exactly the problem. Remove one of the module declarations, based on whether you want to lazy load the module or not.


#3

See: New page Created Module.ts file


#4

yes i can build the app if i del everthing on app.moduls.ts

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

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';



import {StreamingMedia} from '@ionic-native/streaming-media';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
 
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StreamingMedia,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

than i cannot connect to the page,
sorry i know this is easy for you but i tried so long to solve this problem.

here is the error if i use the code above

can u give me more explain how to solve this. Thanks.


#5

Read this.


#6

Ok, so as @AaronSterling inferred if you delete a page’s module then you need to add it to your entryComponents[]:

  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    WalkieTalkiePage,
    StoryLibraryPage
  ],

For example:

If you want to use Lazy Loading, don’t delete the page’s module just remove the page from your entryComponents[]:

  entryComponents: [
    MyApp
  ],

And, reference your pages in quotes:

  public rootPage: any = 'HomePage';

  ...  

  this.navCtrl.push('WalkieTalkiePage');

For example:


Build Error "Type .... is part of the declarations of 2 modules: AppModule
Ionic 3 and generating pages
#7

Hello,
if you want use eager loaded , then you must declare it in app.module.ts
Eagerly loaded pages you use as object like …(myPage).

If you want use lazy loaded , then you must declare it at the module you want use it. lazy loaded page you use as string like …(‘myPage’)

You can mix in your app eagerly loaded and lazy loaded for different pages, but you can not use both for the same page. If you delete it from app.module.ts, then you must change for this page to lazyloaded. Otherwise delete in whateverituseit.module.ts and change to eagerly loaded.

Take a look to internet for better explanation.

Best regards, anna-liebt


#8

thanks for the help, you save lots of my time.

thanks again:grinning: