That is due to using the html5 push strategy. Ionic serve does not handle that for you. Change it to the hash strategy until you build a server that takes all requests and sends it to index.html.
I thought the HashStrategy is the useHash in the RouterModule, but this is wrong.
Removing the <base href> from index.html and also the { provide: APP_BASE_HREF, useValue: "/abc" } from the app.module.ts and also changing the provider for LocationStrategy from PathLocationStrategy to HashLocationStrategy seems to work.
{ provide: LocationStrategy, useClass: HashLocationStrategy }
No I have path like "http:localhost:8100/#pageX"
I update my github project, so for someone it can be helpful to have a sample project. In the next few weeks I will also update the project with Guards, Toolbar and Menu.
If you can take a look on it, Iâm happy if someone can help us to make no mistake and to get a better template for ionic2 with angular2 router.
What do you think?
1 Like
Hi @alexthebuilder, I was looking through this thread and donât think I ever replied to you. Sorry about that. I did look into lazy loading and I think it is possible, though we would have to create multiple bundles for it to work, which means either create our own build scripts or extend ionic-app-scripts.
I started to do that, but had to switch gears on other things. I plan to revisit as lazy loading will become important for us. Did you have a chance to look into it? In the long run we may switch to bundling all our html/js into the native app download as Ionic initially intended so Iâm not sure if itâs worthwhile for us to deal with lazy loading.
Thanks,
Denis
hi @mburger81, yup, I think this is the right approach to solve what you need. If I recall correctly, you were trying to build a single code base to handle a regular web app as well? If so, youâll likely be able to use two different index.html files, one containing the <base href> and also a global JS variable (window.isWebApp = true). Then when youâre setting the locationStrategy, you can switch between the path and hash strategies (useClass: window.isWebApp ? PathLocationStrategy: HashLocationStrategy). Itâs probably not exactly the angular2 way, but it should work. Alternatively, you can switch out the strategy during build time based on where youâre deploying to.
Thanks,
Denis
I tried out the lazy load approach but the initial app size did not change so it didnât buy me as much as I was hoping for. The package size of angular with ionic is pretty significant and not being able to separate them leads to a really large initial app load.
If there is now lazy loading it is not so good, but @alexthebuilder, is this only a problem on using angular2 router, I think also using standart ionic2 router or deeplinker there is no lazy loading for it? right?
There is only lazy loading if you implement it on the angular2 router. it requires a pretty specific setup to implement. Ionic2 does not support lazy loading with the deeplinker.