In this case, it behave like before. Where the page is not lazy loaded.
When I run ionic serve I still get errors like before
Runtime Error
Uncaught (in promise): Error: Cannot find module āā¦pageshomehome.moduleā. Error: Cannot find module āā¦pageshomehome.moduleā. at g (http://localhost:8100/build/polyfills.js:3:7133) at webpackAsyncContext (http://localhost:8100/build/main.js:43601:25) at loadAndCompile (http://localhost:8100/build/main.js:75200:35) at NgModuleLoader.load (http://localhost:8100/build/main.js:75165:83) at ModuleLoader.load (http://localhost:8100/build/main.js:54478:44) at DeepLinker.getNavLinkComponent (http://localhost:8100/build/main.js:31040:39) at DeepLinker.getComponent
etcā¦
1 Like
Ya, sorry, Iāll clarify my original postā¦it works on mac now. It seems it just doesnāt work at all on Windows, unless anyone can give more details.
Also the ionic run android --prod flag does not work anymore
So, if i understand correctly - all the application entry Pages should be imported via app.module.ts @NgModule imports section and will be loaded by default. But subsequent pages which are called via NavController push can and will be lazy loaded. Is that correct ?
When is ionic 3 expected to be stable and GA?
2 Likes
@LoLStats yep, weāre aware of the issue, seems to be related to windows.
@alfabetagama Not quite, check out this sample app which lazy loads all the child pages.
@communityapp When itās ready. Canāt rush it, it would be like takin a cake out of the over too early and itās not baked! 
Iām still receiving the undefined is not a function error on OSX, however it looks like it may be related to providers. Whenever I try and load a provider that is dependent on another one, it throws up the error.
Edit:
There may be something else going on, as I was finally able to load a provider that was depending on another. Will investigate further.
1 Like
Thanks for all the hard work on Ionic 3! Iāve been looking to migrate my current application to this and as it is a very large application I would like to manage where my providers are injected and what scope it is shared. Is there any way to implement the functionality in the follow plunker in the current beta implementation? https://plnkr.co/edit/qPDhxtALFgCqwyUvNV6k?p=preview
What about components that are not standalone pages? Should they be removed from the main module and dropped into the declarations stanza of each page module that incorporates them?
Additional question: is <ion-nav> on board with the concept of referring to page classes by name and having their modules automatically get loaded? I was hoping that something like the following would just DWIM, but so far no luck:
<ion-nav [root]="rootPage"></ion-nav>
rootPage: string;
constructor() {
checkAuthentication().subscribe((authed) => {
this.rootPage = authed ? "AuthedPage" : "UnauthedPage";
});
}
1 Like
For the most part we recommend a few different options.
A) Make modules for each of your components
Component-A
comp-a.ts
comp-a.module.ts
Component-B
comp-b.ts
comp-b.module.ts
This will allow more refined control over everything and make lazy loading
B) One module for all the things
Components
comp-a.ts
comp-b.ts
components.module.ts
This is the easiest way to group things together, but could lead to you loading a bunch of code you dont really need.
C) Some hybrid approach of the two
This one is a bit more flexible as it allows the best of both worlds. But it really depends on your setup.
Weāre still hashing out some of the finer details to what we suggest, but these are the two major ideas that weāve come up with.
2 Likes
If I have a component that includes Ionic components, what is the proper way to import the Ionic modules into the custom componentās module?
That may have been the single most confusing sentence I have ever written in my life, but I canāt think of how to improve it.
1 Like
Is something like this what you are looking for?
I have the same question, as well as wondering if Ionic components have to be imported in Modals. Iām currently getting the error Error: Template parse errors: 'ion-item-divider' is not a known element: in a modal.
The ionic components should just work without issues.
Take a look at the conference app branch with lazy-loading set up.
I donāt see any non-page components in the conference app. Thatās my specific concern. I expect that the IonicPageModule import deals with getting the Ionic components included, but when rolling oneās own module for a non-page subcomponent, I thought IonicPageModule would be contraindicated. I am currently forging ahead importing just IonicModule, but unsure if that is appropriate.
What seems to work for subcomponent modules:
@NgModule({
declarations: [
Subcomponent,
OtherFriendsSubcomponentNeeds,
],
imports: [
CustomPipeModule,
OtherModularizedSubSubComponentModule,
IonicModule, // if we need <ion-*> components
CommonModule, // if we need ngIf and friends
],
exports: [
Subcomponent,
]
})
export class SubcomponentModule {
}
Failure to explicitly export will cause template parse errors on things attempting to import SubcomponentModule.
<ion-nav> still hates me trying to use string class names.
My app is structured so some of the pages are smart components that contain multiple dumb components. There are a couple dozen different dumb components, and a lot of them appear on more than one page. Example: āLike Button.ā It emits whenever it is clicked, and it might be contained inside many different components, which in turn could appear on multiple pages. Could I import the Like Button into its containing component, and then import the containing component into each page where it might appear? Is that what youāre saying? Right now I just import everything once, into app.module.ts.
I think so. You would need to make a LikeButtonModule that declares and exports the LikeButtonComponent and then import that module in any componentās module that uses the like button.