What is the proper way to utilize components.module.ts in an Ionic project?


#1

I have an Ionic project utilizing Angular, with some custom components that I’ve made and individually tested out that work just fine. However, I’ve been having trouble figuring out how to use lazy loading in my page.module.ts files.

Each time I try a different way of doing it I get some sort of error saying how I can’t bind to x because it isn’t a property of y, or that there are two instances of a component in some file where there shouldn’t be, and I just can’t seem to find any clear help with this problem.

My file structure is like this :

src/

    components/

        blahcomponent/

        blahblahcomponent/

        components.module.ts // What do I do with this?

    pages/

        blahpage / blahpage.module.ts // to make it so these files can share the components on each of my pages?

        blahblahpage / blahblahpage.module.ts // to make it so these files can share the components on each of my pages?

#2

Follow the docs from Ionic about lazy loading. Angular lazy loading is different, and if you follow that recipe it will not work. Roughly speaking, Ionic lazy loading is view-driven, while Angular lazy loading is feature-driven. In Ionic, you only lazy load components as part of a page, an IonicPage. This is a good sample project to follow.