DeepLinker & Ionic Menu & Guards & Lazy Loading

Ionic Framework ionic-v3
1

I came from Angular2 with Material Design, which use angular router and so on.

There I created an app.component.ts which contains my html scaffolder my @RouteConfig and my <router-outlet></rout er-outlet> where I render my pages.

<data>
  <header></header>
  <main>
    <router-outlet></router-outlet>
 </main>
 <footer></footer>
</data>

In this case, it is very easy for me to handle main page, header, footer and load dynamic content in the router-outlet which are my pages. Also I had a Menu Button which loads only a DIV for my menu.
This new DeepLinker/Router in Ionic is very different and I wait a lot to get the get it, but now it is here and I’m still not sure how to implement the classical angular, webapp/ PWA way with the new ionic2 way.

Also, what’s about page guards and lazy loading?

Some ideas or helps?

2

So the deeplinker deserves a blog/overview video it self…

Ionic approaches this differently. Instead of having a global header, footer, and outlet, the components can be loaded via ion-nav and navController.

So take for example, the tabs starter.

For each component we can reach via navController, we can declare the route segment for that component

This is all outlined in the docs.

http://ionicframework.com/docs/v2/api/navigation/DeepLinker/

For guards, you can see this section in navControllers docs

For lazy loading, we’re not planning on supporting that for now. Since most apps will be deployed to a device and static build using AoT, we really don’t need lazy loading of components.

1 Like
3

As someone looking to use my app as a website as well. Can you point me to any resources on how I could go about implementing lazy loading within the current framework? I understand the Ionic team is not planning on supporting this but I would like to see if it would help out my implementation.

4

Well, like I said before, its not something that we’re supporting.
The current deeplinker does not support lazy load components as the functionality to do so is not there.

5

Understood. Had to ask. Thanks!

6

Hi @mhartington, I understand your objection but let me explain what we intend to do.

We are creating a Smart Environment product and try to use one code for apps and webapp and next we will also support PWA. We know the UX for app is not the same as for a webapp. But we are trying to create an UX which works good for webapp and also for app, someone perhaps don’t like it but for now we believe in it.
Our actual app is only a RESPONSIVE WEBPAGE which works great on pc and on mobile browser with same UX and our customers love it. Now we try to create a new hybrid APP with ionic2 which on other project we have done works great. But in our SmartEnivronment case the UX is different from a classical APP.

For example, we have always the same toolbar on the top, which content doesn’t change on different pages. So we think in a world where you can use same code for app and web/PWA to do this is legit, or not?

So we try to have an static main page where we can load only new content in main div. In our project we also use third part widgets which will load dynamically in browser, we have something like an appstore which loads code to gateway and this will be load dynamically with angular.
In angular2 this works great, router as dynamic loading. We love your ionic components and your stability and integration with cordova and as we need an installable app from playstore we would like to use ionic2 which is great.

So do you thinkg, are we able to have a static main page with always the same header and load the new page in there?
We try to do something like this, which doesn’t really work:

<ion-menu [content]="content">
  <ion-toolbar>
    <ion-title>Menu</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button menuClose ion-item (click)="openPage1()">
        Page1
      </button>
      <button menuClose ion-item (click)="openPage2()">
        Page2
      </button>
      <button menuClose ion-item (click)="openPage2()">
        Page3
      </button>
    </ion-list>
  </ion-content>

</ion-menu>


<ion-header>
  <ion-toolbar color="primary">
    <button ion-button menuToggle icon-only>
      <ion-icon name='menu'></ion-icon>
    </button>
    <ion-title>Lanthings Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-content>

Show here our UX in WEB and app

image
Pasted image1893Ă—976 95.7 KB

image
Pasted image293Ă—523 15.2 KB

7

Is there any way to get to the deepLinkConfig from a component? The Ionic side menu template creates a this.pages array to populate the side menu. I would like to be able to populate it from the deepLinkConfig so not to have redundant data structures.

Also I need to be able to create a breadcrumbs component. I see I can access the navController and use the getViews method to get an array of views, but I have no way to know what the name of the component is from the deepLinkConfig. Any way to do that?

8

I didn’t found nothing, and you?

9

I created a provider that contains my deepLink config and is instantiated in my app.module.ts file and passes in the links array. I then also use the same provider in my app.component.ts file to provide the menu links. But I still have not way of knowing the exact paths when entering a view component to then make a breadcrumb. Maybe if I use the defaultPath property in the links config, I can rely on that for my breadcrumb when the config does not show where I’ve been in the case of coming from a deep link.

1 Like
10

We opened a another new thread with an example, hoping that someone from the team can help us on PWA, deeplinker and so on!!! :expressionless:

11

@mhartington or anyone can tell me if the current ionic deeplinker supports lazy loading?
If deeplinker supports lazy loading how can we implement that I am having issue with it.