Does anyone have a working example of using the new @IonicPage for URL routing (Deeplinking)?

Ionic Framework ionic-v3
1

We were on the verge of dropping Ionic for a new project, and then v3 was announced with @IonicPage to provide deeplinking and URL route changes. This is a requirement on our side for a project that we need to bundle for mobile deployment AND deploy for normal browser-based access.

Taking a quick shot, I’ve made all of my pages modules, and the nav controller still routes things, but there is no update to the URL, and if I try to manually push a route onto the nav controller like

this.navCtrl.push('my-new-page');

I end up with an “undefined is not a function” firing off like:

TypeError: undefined is not a function
at Array.map (native)
at webpackAsyncContext (http://localhost:8100/build/main.js:77961:34)
at loadAndCompile (http://localhost:8100/build/main.js:77043:36)
at NgModuleLoader.load (http://localhost:8100/build/main.js:77008:83)
at ModuleLoader.load (http://localhost:8100/build/main.js:56232:44)
at DeepLinker.getNavLinkComponent (http://localhost:8100/build/main.js:31057:39)
at DeepLinker.getComponentFromName (http://localhost:8100/build/main.js:31040:25)
at getComponent (http://localhost:8100/build/main.js:33545:23)
at convertToView (http://localhost:8100/build/main.js:33563:16)
at Tab.NavControllerBase.push (http://localhost:8100/build/main.js:43601:103)
at AboutPage.navigate (http://localhost:8100/build/main.js:45042:22)
at Object.eval [as handleEvent] (ng:///AboutPageModule/AboutPage.ngfactory.js:126:24)
at handleEvent (http://localhost:8100/build/main.js:12131:119)
at callWithDebugContext (http://localhost:8100/build/main.js:13339:42)
at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/main.js:12927:12)
2

Working project provided in this comment:

My issue was that I was importing the to-be-lazy-loaded modules in my app module. Remove those, and reference all pages by their IonicPage.name strings and all works.

3

I’m having the same problem as you, getting error ‘TypeError: undefined is not a function’ when using url routes, according to official documentation. But I did not quite understand how you solved the problem.

4

The keys are:

  1. Each page that you want lazy load, add the @IonicPage decorator, and also create a module for the page as well. (I’m guessing you have this part since it’s compiling. Ionic app scripts complains if it can’t find a your-page-name.module.ts file)

  2. Do not import your lazy loaded modules in the root app.module.ts.

If you import the modules for your @IonicPage modules in the root module, it registers them with the moduleLoader up front and A) doesn’t provide the benefits of lazy loading, since everything is loaded up front, and B) confuses Ionic’s deepLinker that uses the module loader to request the proper page module for the route or nav string name you provide.