{"id":238,"date":"2020-05-27T19:38:53","date_gmt":"2020-05-27T17:38:53","guid":{"rendered":"https:\/\/celilsemi.erkiner.com\/blog\/?p=238"},"modified":"2020-05-27T19:38:56","modified_gmt":"2020-05-27T17:38:56","slug":"ionic-angular-preload-modules-only-on-device","status":"publish","type":"post","link":"https:\/\/celilsemi.erkiner.com\/blog\/ionic-angular-preload-modules-only-on-device\/","title":{"rendered":"Ionic Angular Preload Modules Only on Device"},"content":{"rendered":"\n

Ionic Angular application has lazy loading configured by default. It works well, but if the app is very large preloading every module in the background may cause unnecessary data to be loaded in the background. You might waste user\u2019s bandwidth by downloading screens they might not visit. Ideally, for mobile web, we would like to preload the core features only to keep the bundle small. However, on mobile devices, it should preload all the rest of the modules when the network becomes idle because all the connections are on local without using any real bandwidth.<\/p>\n\n\n\n

Fortunately, It is possible with Ionic’s\u00a0Platform<\/code>\u00a0and Angular\u00a0PreloadingStrategy<\/code>. We can define custom pre-loading strategy in Angular and detect the platform using Ionic’s Platform Service.\u00a0<\/p>\n\n\n\n

To create a strategy, Angular provides an abstract class called\u00a0PreloadingStrategy<\/code>\u00a0that you can implement. This class has one method you need to override,\u00a0preload<\/code>, which takes in the configured lazy route, and a parameterless function you can call to programmatically load the lazy route. It returns an observable of type any. A better strategy can be created by utilizing this class.<\/p>\n\n\n\n

import { Injectable } from '@angular\/core';\nimport { PreloadingStrategy, Route } from '@angular\/router';\nimport { Observable, of } from 'rxjs';\nimport { Platform } from '@ionic\/angular';\n\n@Injectable({\n    providedIn: 'root'\n})\nexport class LocalOnlyPreloadingStrategy implements PreloadingStrategy {\n    constructor(private platform: Platform) { }\n    public preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {\n        console.log(this.platform.is('hybrid'), route);\n        if (this.platform.is('hybrid')) {\n            \/\/ Running on a device\n            return fn();\n        }\n        \/\/ Not running on a device\n        return of(false);\n    }\n}<\/pre><\/div>\n\n\n\n
LocalOnlyPreloadingStrategy<\/code> does exactly what PreloadAllModules does on the device but does exactly what NoPreloading does on the web. This gives the app optimum agility in all platforms.<\/p>\n\n\n\n
You can simply import and use just like\u00a0in your code;<\/p>\n\n\n\n
import { LocalOnlyPreloadingStrategy } from '.\/services\/local-only-preloading-strategy.service';\n\n@NgModule({\n  imports: [\n    RouterModule.forRoot(routes, { useHash: true, preloadingStrategy: LocalOnlyPreloadingStrategy })\n  ],\n  exports: [RouterModule],\n  providers: [LocalOnlyPreloadingStrategy]\n})\nexport class AppRoutingModule { }<\/pre><\/div>\n\n\n\n
For more information;<\/p>\n\n\n\n