How to configure deeplinks in AppModule.forRoot()?

Thanks. I’ll try and figure out how to get to RC3. Any leads on how to do that?

From rc1 I think it was pretty painless. I just updated package.json. Dont remember any real issues.

I wish that were true for me. Upgrades never seem to work, and I don’t know why. I try to use everything standard, and follow all instructions. I get hundreds of messages, after changing to rc3 in the package.json file and running npm install.

Is there some other command to run, other than npm install?

[12:55:43] typescript: node_modules/@types/core-js/index.d.ts, line: 21
Duplicate identifier ‘PropertyKey’.

  L20:  * target object. Returns the target object.
  L21:  * @param target The target object to copy to.
  L22:  * @param source1 The first source object from which to copy properties.

[12:55:43] typescript: node_modules/@types/core-js/index.d.ts, line: 85
All declarations of ‘name’ must have identical modifiers.

  L84:    * otherwise.
  L85:    * @param predicate find calls predicate once for each element of the array, in asc
  L86:    * order, until it finds one where predicate returns true. If such an element is f

[12:55:43] typescript: node_modules/@types/core-js/index.d.ts, line: 145
Subsequent variable declarations must have the same type. Variable '[Symbol.unscopables]'
must be of type ‘{ copyWithin: boolean; entries: boolean; fill: boolean; find: boolean; findIndex:
boolean; keys: …’, but here has type ‘any’.

 L145:  /**
 L146:    * Creates an array from an array-like object.

Have you updated the dependencies to this? https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#200-rc3-2016-11-17

Thanks so much for your time, Alex! I can’t tell you how much it is appreciated. I am much closer, but I have no idea where an indexOf might be incorrect, whether in my code or some library.

ionic-hello-world@ watch /Users/dqj/Local/dev/apps/pl3/nocti/frontend
ionic-app-scripts watch

[13:05:11] ionic-app-scripts 0.0.45
[13:05:11] watch started …
[13:05:11] build dev started …
[13:05:11] clean started …
[13:05:11] clean finished in 3 ms
[13:05:11] copy started …
[13:05:11] transpile started …
[13:05:16] build dev failed: Cannot read property ‘indexOf’ of undefined
[13:05:16] copy: Error copying “/Users/dqj/Local/dev/apps/pl3/nocti/frontend/src/manifest.json” to
“/Users/dqj/Local/dev/apps/pl3/nocti/frontend/www/manifest.json”: File not found
[13:05:16] copy finished in 5.13 s
[13:05:16] watch ready in 5.17 s
Running live reload server: http://localhost:35729
Watching: www//*, !www/lib//, !www/**/.map
√ Running dev server: http://localhost:8100
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit

ionic $

is it this error? RC1 - Manifest.JSON error

Yes, that was one of the problems. I am very grateful for your help in upgrading to RC3! If you’re ever interested in dev support consulting, please let me know by private message!

Unfortunately, the original issue is still a problem. If I enter the hash url portion manually, nothing happens and I get a “nav-util.js:33 invalid page component: null” error in the console.

tl;dr
After much gnashing of teeth I was able to get there. I had to remove the typings and node_modules directories, re-run nmp install and then re-install my custom modules (ng2-chartjs and ng2-select2) to get it back up and running.

Edit: removed the font copying issue. I had my own directory named fonts in assets, and the new release wanted to use that name.

can you update your segments in deepLinkConfig to be /admin/dashboard and not just dashboard? It needs the full path to route.

I tried a number of variations, including #/admin/dashboard, dashboard, admin/dashboard and /dashboard. They all show different things in the URL, but typing them in manually still doesn’t work.

Here’s how it shows for /admin/dashboard:

Whats /admin? where does that come from?

That’s from the tabs template. I added the tabUrlPath to see if it would help things:

<ion-tabs id="mainTabs" [selectedIndex]="selectedIndex">
    <ion-tab *ngFor="let p of pages; let i=index"
             [root]="p.page"
             [rootParams]="mergeParams(p.args)"
             [tabTitle]="p.title"
             [tabIcon]="p.icon|icon"
             (ionSelect)="tabSelected(i,p,mergeParams(p.args))"
             [tabUrlPath]="'admin'"
    >
    </ion-tab>
</ion-tabs>

Leaving tabUrlPath out I get http://admin.nocti.dev/#/roster-setup/assignment and http://admin.nocti.dev/#/dashboard/dashboard for my location bar paths.

ah. I have not implemented this with tabs.

I think I’m going to abandon tabs. There are some other good reasons for it in my app as well. It doesn’t seem like this area is well-documented or completely fleshed out yet in ionic 2.

Thanks again for your help.

In case someone is reading this to make DeepLinker work, here is a working src/app/app.module.ts compatible with clean project based on “tutorial” template (2016-12-22), which was originally created with command ionic start MyIonic2Project tutorial --v2.

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler, DeepLinkConfig } from 'ionic-angular';
import { MyApp } from './app.component';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';

export const deepLinkConfig: DeepLinkConfig = {
    links: [
        { component: ListPage, name: "List Page", segment: "listpage"},
        { component: HelloIonicPage, name: "Hello Ionic", segment: "hello" }
    ]
};

@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage
  ],
  imports: [
    IonicModule.forRoot(MyApp, {}, deepLinkConfig)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

The things that definitely make sense but took me a while to find out, since they were not explicitly told in the documentation of DeepLinker, were that
(1) I must import DeepLinkConfig, and that
(2) the url must include /#/.

So first I kept trying to load http://localhost:8100/listpage instead of http://localhost:8100/#/listpage.

Thanks to @FdezRomero and @jgw9617 for helpful forum posts, that directed me on the right path.

1 Like

Hi, is there any lazy loading in the Deeplinker navigation.

@pavankumar123 No, Ionic navigation doesn’t support lazy loading yet.

So, what the hell are we supposed to use?

If I add <base href="/"> to my index.html, I break mobile builds.
If I remove it, I break browser/desktop builds.

How are we supposed to handle this???

EDIT

Ok, spoke too soon.

They key is to remove the base from the index.html.
Also, we need to import import { APP_BASE_HREF } from '@angular/common'; on our app module.

Finally, we need to add this to our providers section on the module:
{provide: APP_BASE_HREF, useValue: '/'},

However…
This breaks the ability of the mobile application to fetch resources from the app (icons, images, etc).

Resuming, the state of the art in terms of Deeplinking and PathLocation strategies is broken… very, very broken

1 Like

Hi @celsosantos. We are using the Deeplinker in our PWA in production and it works perfectly with the hash symbol (#) as some users and myself pointed out above. Just in case you’re interested in this as a workaround.

1 Like

Hi.

Well, yes, I had to fallback to that approach too, though it just doesn’t feel right.
Guess that’ll have to do for now

Hi, I really dont know how can it work for you, but for me its totally broken, maybe could you help me find a way to use deeplinks in right way please?

I have starter tabs template in ionic 3, this is my deeplink config in app.module.ts:

export const deepLinkConfig: DeepLinkConfig = {
	links: [
		{ component: AboutPage, segment: 'about', name: 'About' },
		{ component: HomePage, segment: 'home', name: 'Home' },
		{ component: ContactPage, segment: 'contact', name: 'Contact' },
		{ component: ContactDetailPage, segment: 'detail', name: 'ContactDetail', defaultHistory: ['Contact'] },
	]
};

and in app.component.ts I want to navigate user to contactDetailPage in Contact tab… I am trying to do it this way:

ngOnInit() {
	window.location.href = "#/contact-tab/detail";
}

this is my tabs.html

<ion-tabs>
    <ion-tab [root]="tab1Root" tabUrlPath="home-tab" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabUrlPath="about-tab" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabUrlPath="contact-tab" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

When I navigate directly in app by click to tab Contact and then to button for push to ContactDetail it works

and url looks like this: http://localhost:8100/#/contact-tab/detail
but when I open new tab in my browser and paste the URL above, then my tab-bar is missing


and my url changes to http://localhost:8100/#/contact

I am totally frustrated from this, can you help me please?