Ionic 3: Page module mapping not compiling correctly #848
Comments
|
Can you give me access to the repo so I can see what's going on? I can add some unit tests to account for whatever case we're missing. Thanks, |
|
Here is my deeplinkconfig log as requested here.
{
"links": [
{
"loadChildren": "../pages/account-activate/account-activate.module#AccountActivatePageModule",
"name": "AccountActivatePage",
"segment": null,
"priority": "low",
"defaultHistory": []
},
(...)
{
"loadChildren": "../pages/tour/tour.module#TourPageModule",
"name": "TourPage",
"segment": null,
"priority": "low",
"defaultHistory": []
}
]
} |
|
|
UPDATE: no, that doesn't seem to be the case. The difference between my app and the ionic-conference app is that I also note that the conference app has a bunch of [n].main.js files in www/build that appear to be code splitting artifacts, whereas my app does not have any of these. |
|
Same issue here. After updating to the latest ionic 3, routing no more works because of Looking into the stack trace seems |
|
PS. I have observed that my project generates single main.js file, while the conference app have multiple split chunks of main.js, maybe that's something to do with it as well. |
|
The solution for me was to import my custom providers in each page module that I need them in, as opposed to importing all of them in the app module. Importing Ionic-native modules in the app module works fine. |
|
The problem with this approach is that it seems my providers are no longer singletons. |
|
My problem boiled down to the |
|
FWIW I am also using moment.js. |
|
@brettatoms Great, great catch, thanks for sharing! @danbucholtz |
|
See angular-cli #2496 for more info. |
|
Ditching moment in favor of date-fns seems to have fixed me. |
|
Edit: Nevermind |
|
What a weird issue with Moment. Any thoughts on it? I am going to take a look. It seems strange to me since we're letting Webpack do the heavy lifting there. Hmmm. Thanks, |
|
@danbucholtz: The most comprehensive resource I have come across to date, which I suspect is also where @brettatoms found this (major props to you on this, BTW) is angular-cli #2496 as mentioned above. I cannot independently confirm that all wildcard imports silently break code splitting or not, but at least in my case, any occurrence of
...and corroborated by @Sh1d0w with:
...so it seems pretty conclusive that whatever the root cause, failure to see webpack code splitting act as expected is a proximate cause for this issue. BTW: I experimented with replacing |
|
I can confirm that "undefined is not a function" runtime error related to module loading. Made a simple app based on the sidemenu template (using ng4/ionic3 and lazy loading). The app fails right on first load as soon as I have installed angular2-moment and specified MomentModule in the imports section of app.module.ts. Note, I am testing this running via the usual "ionic serve". Looking forward to advice on proper solution / fix and best practices moving forward. p.s. Here's the archive of the app if anyone wants to have a look: https://drive.google.com/file/d/0B4eB_Qz7OSaTZUZPWktLdWRlR2s/view?usp=sharing Update [31.03.2017]: The newly released @ionic/app-scripts@1.2.5 solved this particular problem. Thanks @danbucholtz! |
|
Thanks for this, having same issue, tried many different things, no real progress. |
|
@rapropos I wish I had found the problem in that angular-cli issue but unfortunately is was through a LOT of trial and error. The problem doesn't happen with all wildcard imports since we're also doing |
|
Looks like I'm having the same issue with |
|
This is the corresponding PR that has fixed the angular-cli issue that was mentioned. Maybe that's something to work with? |
|
Yep, we're aware of the PR. Currently looking into it and seeing if this will help for us. |
|
It's interesting that the ng-cli PR seems to be AoT-specific. I was bit by this issue even without using ngc, just on a straight dev build. |
|
This is fixed. Please test and let me know how it goes. As for the Thanks, |
|
@danbucholtz Thanks! I can confirm it is fixed now for my project. |
|
@jamesbenns I agree with you. And because I consider ionic to be a super cutting edge framework, Im sure ionic page modules will work better in the future. |
|
I'm having the same issue. I have an ionic app that works fine. I use the ionic cli to generate a new page, I then import the page module in app.module, without adding any code to the page, and I get the error.
Environment setup: I can get around the issue by removing the page module created by the cli and reference the page directly in app.module, but this means it's actually easier for me to create pages manually rather than using the cli. |
|
Exactly the same issue here. I'm going back to chucking the pages in app.module for now. Error: ionic info: global packages:
@ionic/cli-utils : 1.1.2
Ionic CLI : 3.1.2
local packages:
@ionic/app-scripts : 1.3.7
@ionic/cli-plugin-ionic-angular : 1.1.2
Ionic Framework : ionic-angular 3.2.1 |
|
Got same issue, my ionic env is: |
|
Same problem here when navigating using a string instead of a reference to a page component. I'm not using any third party librarys, just pure ionic 3.
`global packages: local packages: |
|
Seems broken again with just creating new ionic 3 project and generating 2 new pages. No extra libs installed. @danbucholtz |
|
UPDATE: read my reply, this error is fixable Happens for me as well. Have an existing app where pages work just fine the old way, but now converting them to use @IonicPage decorator and modules. However i get two different errors depending how i load the problem page. If i enter using the /#/notifications url route, i get this error
If i try to nav into the page using the ionicpage decorator, as a string, that is nav.push('notifications') i get a different Error Page decorators Module for my page My package info global packages: local packages: System: |
|
Re: my previous comment: I got this working without updating or changing any packages. Not sure how exactly just trying different things. I have a shared module with a huge ton of services and pages, so one change I made was moving the BrowserModule out of shared and having it directly in app.module. Also I added entryComponents: [NotificationsPage], on the page module. Anyway I hope this info helps somebody. |
|
We are having the same issue here, looks like not solved yet. I'm creating the page using If I try to call the page using it fails. But if I use My issue is the same of @PrinceOfAmber. Noticed also that it only occurs if I declare more then one page on my App Module. Tried using the @danbucholtz latest app-scripts version with no success. |
|
@danbucholtz The things are broken here, could you reopen the issue? |
|
Please provide a minimal example project to inspect. |
|
I've just provided the steps to reproduce on main git (not sure if this is a app-scripts problem) |
|
Tried to create a plunker to reproduce, but looks like IonicPage don't work over plunker, the error is "Invalid link: First Page". But reproducing the bug using ionic serve is very fast. |
|
Put together a demo and push to github then. |
|
I'm encountering the same issue using I've posted a sample app demonstrating the bug @ https://github.com/kael/ionic-deeplinking-bug-demo I've also tried by adding Seems I have to fallback to the former navigation mechanism. |
|
@kael your project was not setup correctly. Lazy-loaded pages should not be declared in the app-module, as you had. After applying the fix, and letting things build, I was able to load Please see my blog posts that go into detail about lazy loading. http://blog.ionic.io/ionic-and-lazy-loading-pt-1/ |
|
@mhartington: thank you very much for the fix. There's still an issue as mentioned on the PR page, when appending directly the path to the host in the address bar (but for my use that won't be a problem). Cheers. |
|
Interesting. If you load the I installed nightly and it seems to be fixed. Though the urls have changed a bit. |
|
URLs are in phase one of two as we build out a PWA story. They are going to change a bit in Thanks, |
|
Guys we really appreciate your effort and the great stuff you are doing with Ionic. However don't you feel that Ionic is a big framework, used by a lot of projects nowadays and promoting something broken in official release is not a good practice? I mean you always rush to announce cool stuff which then don't work for like 5 releases ahead until it gets properly fixed and ready to use in production? My point is: if you are going constantly to change and rewrite the framework, add new things or deprecate old ones, then please do it as a dev or beta release, don't do regular releases which then appears to be broken. General public should always use what is stable. We get a bunch of nice fixes in a release, and a bunch of not working and not ready for production features. Then the developer has to decide if he wants to upgrade to get those nice fixes or wait 4-5 releases to get the new stuff fixed. It will be much nice if you just release a dev or beta previews so users can test them if they want, but officially release and include this feature when it is bullet proof. Otherwise you are only causing problems with production builds. I am focusing here Lazy loading and virtual scroll, but it could apply for anything new you want to introduce in future. |
|
By all means, feel free not to upgrade or wait until the next release. We fixed a ton of navigation bugs, but as a result we had to change the url a bit. We feel that it's better to ship the fixes now than to wait. We will likely be able to shrink the url down some in the near future, and then set-it-and-forget it. There are very few people who are using the url today so it isn't a big deal compared to the many, many, many devs using Ionic via Cordova. Thanks, |
|
@danbucholtz Please pay attention to my last sentence in my previous post. It was not related directly to your last comment regarding URLs it was more towards releasing unstable stuff in prod. You can't tell developers "feel free to not upgrade", when this release provides a fixes for previously released unstable stuff for example. Once again I don't mean to argue, I really appreciate all work you are doing, I just think your release lifecycle is very wrong. For example I do lectures where I present Ionic to another developers. When someone decides to give it a try and he for example wants to test Lazy loading feature and he sees it is broken, what impressions are you leaving in him? What Ionic should provide is a rock solid solution, instead of always changing an unreliable releases. |
|
As a side note if there is still a confusion what I am talking about it is not even about upgrading from one release to another. Same applies for newcomers that just create their first Ionic project. See my comment here #848 (comment) and this thread in general. With just a blank starter app, used ionic-cli to generate two new pages without installing anything else, and just following the blog post about lazy loading it just not works. This is what I am talking about. |
|
@Sh1d0w Is it still broken for you? Because it works fine for me on a project I created today This is my ionic info output. |
|
I have the same problem, repo at https://github.com/basvdijk/ionic-module-test when you open the sidebar and click the test entry I'll get: |
|
@basvdijk your demo repo does not actually include any lazy loading at all. Not sure if you pushed the wrong code up or something. The way to repo currently is setup, you would never have that issue. |
|
@mhartington Sorry seems I have forgotten to push my changes. Please pull for a version with the test module. |
|
Similar to another example posted here, your setup is not correct. @@ -6,7 +6,6 @@ import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
-import { TestModule } from '../test/test.module';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@@ -18,7 +17,6 @@ import { SplashScreen } from '@ionic-native/splash-screen';
ListPage
],
imports: [
- TestModule,
BrowserModule,
IonicModule.forRoot(MyApp),
],
You don't import the module for the lazy loaded page at all. |
|
@mhartington I see, thanks for clarifying! |
Short description of the problem:
Using the latest Ionic 3 beta, an error occurs when loading the root page. It seems to be caused by how app-scripts creates the page module mapping, so I'm posting it here.
What behavior are you expecting?
It should load. My page modules are just like the lazy-load branch of the conference-app and I'm using the
@IonicPage()decorator on my pages.Let me know if you need more debug info!
Steps to reproduce:
<ion-nav root="AccountLoginPage"></ion-nav>ids.slice(1).map(...)below errors asids.length === 1for all pagesWhich @ionic/app-scripts version are you using?
1.2.2
Other information:
The text was updated successfully, but these errors were encountered: