Ionic 3 Help for a Beginner

Ionic Framework ionic-v3
1

Hi folks, this may seem like a very simple question to most of you, but i’m just starting out with Ionic 3 so i appreciate your help and patience.

So i’ve created a very simple starter app by using ionic start MyIonicProject tabs

Then i added a page using ionic generate page search

All works very nice, however my question relates to my new page. My new page now contains search.module.ts where none of other pages, from the basic tabs starter template, contain .module.ts

Having read as much as i can on this, i am aware this relates to lazy loading, however i wish to ask what my best approach is to maintain consistency in all pages.

Should i add .module.ts to existing pages or remove it from my newly created page ?

Either way i would greatly appreciate any direction to documentation or tutorial to guide me, as i am an absolute newbie.

Many thanks in advance.

2

Each Lazy Loaded page needs to be setup as a module like your existing one. So if you now generate more pages in the same way you will see they are created similarly - with their own module file. If you don’t want to use Lazy Loading you don’t need this pattern. Check out the Ionic Conference app - it’s a very useful starting point.

3

Thanks for your reply, i can see that newly created pages have their own module file, but i was wondering what my best approach is. This is my first crack at building an App for educational purposes only. Should i embrace lazy loading at this point and start with a blank template and manually create pages ? I have read that lazy loading is still in beta, but that may be an outdated doc. Many thanks

4

You can delete the module.ts from new pages and remove the @ionicPage decorator from the pages component.ts if you want to. I do, out of personal preference.

5

Ahh ok so is as simple as that … Wonderful !

6

It’s not actually that simple. Check out the conference app to see an example. The two additional things you need to remember are importing that page into other pages that need to reference it and removing the quotes when you push the page onto the nav stack etc

7

As well as importing it to app.module.ts, adding it to declarations, and entry components.

in app.module.ts

import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage  <---

  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AngularFireDatabaseModule,
    AngularFirestoreModule,
    AngularFireModule.initializeApp(config),
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage <---
  ],
  providers: [
    StatusBar,
    SplashScreen,
    IonicErrorHandler,
    {provide: ErrorHandler, useClass: ErrorProvider },
    ErrorProvider,
    CodeProvider,
    AuthProvider  ]
})
export class AppModule {}
8

Thanks guys i managed to successfully add a new page without lazyloading, thanks to your direction.

Created the page, removed module.ts, removed page decorator from component.ts, imported page into app.module.ts, added it to declarations and entryCompnents … It all seems to be working perfectly now without any errors … Thank you so much for your assistance, i really didn’t expect so much help and so quickly !! Amazing !

2 Likes