feat(module-loader): preload modules based on priority

Author: brandyscarney

src/components/nav/test/basic/app/app.module.ts

@@ -20,15 +20,16 @@ import { MyCmpTest2 } from '../pages/first-page/my-component-two';
     IonicModule.forRoot(E2EApp, { swipeBackEnabled: true, preloadModules: true }, {
       links: [
         { name: 'first-page', component: FirstPage },
-        { name: 'another-page', loadChildren: '../pages/another-page/another-page.module#AnotherPageModule' },
-        { name: 'full-page', loadChildren: '../pages/full-page/full-page.module#FullPageModule', defaultHistory: ['first-page', 'another-page'] },
-        { name: 'primary-header-page', loadChildren: '../pages/primary-header-page/primary-header-page.module#PrimaryHeaderPageModule' },
-        { name: 'redirect-page', loadChildren: '../pages/redirect-page/redirect-page.module#RedirectPageModule' },
-        { name: 'tab-item-page', loadChildren: '../pages/tab-item-page/tab-item-page.module#TabItemPageModule' },
-        { name: 'tabs', loadChildren: '../pages/tabs/tabs.module#TabsPageModule' },
-        { name: 'tab-one', loadChildren: '../pages/tab-one/tab-one.module#Tab1Module' },
-        { name: 'tab-two', loadChildren: '../pages/tab-two/tab-two.module#Tab2Module' },
-        { name: 'tab-three', loadChildren: '../pages/tab-three/tab-three.module#Tab3Module' },
+        { name: 'another-page', priority: 'low', loadChildren: '../pages/another-page/another-page.module#AnotherPageModule' },
+        { name: 'full-page', priority: 'low', loadChildren: '../pages/full-page/full-page.module#FullPageModule', defaultHistory: ['first-page', 'another-page'] },
+        { name: 'primary-header-page', priority: 'high',  loadChildren: '../pages/primary-header-page/primary-header-page.module#PrimaryHeaderPageModule' },
+        { name: 'redirect-page', priority: 'low',  loadChildren: '../pages/redirect-page/redirect-page.module#RedirectPageModule' },
+        { name: 'tab-item-page', priority: 'high',  loadChildren: '../pages/tab-item-page/tab-item-page.module#TabItemPageModule' },
+        { name: 'another-one', priority: 'off', loadChildren: '../pages/tab-item-page/tab-item-page.module#TabItemPageModule' },
+        { name: 'tabs', priority: 'high',  loadChildren: '../pages/tabs/tabs.module#TabsPageModule' },
+        { name: 'tab-one', priority: 'off',  loadChildren: '../pages/tab-one/tab-one.module#Tab1Module' },
+        { name: 'tab-two', priority: 'low',  loadChildren: '../pages/tab-two/tab-two.module#Tab2Module' },
+        { name: 'tab-three', priority: 'low',  loadChildren: '../pages/tab-three/tab-three.module#Tab3Module' },
       ]
     })
   ],

src/navigation/nav-util.ts

@@ -125,6 +125,7 @@ export class DeepLinkMetadata implements DeepLinkMetadataType {
   name?: string;
   segment?: string;
   defaultHistory?: string[];
+  priority?: string;
 }
 
 export interface DeepLinkDecorator extends TypeDecorator {}

src/util/module-loader.ts

@@ -79,10 +79,26 @@ export interface LoadedModule {
 export function setupPreloading(config: Config, deepLinkConfig: DeepLinkConfig, moduleLoader: ModuleLoader) {
   return function() {
     if (config.getBoolean('preloadModules')) {
-      const linksToLoad = deepLinkConfig.links.filter(link => !!link.loadChildren);
-      for (const link of linksToLoad) {
-        moduleLoader.load(link.loadChildren);
-      }
+      const linksToLoad = deepLinkConfig.links.filter(link => !!link.loadChildren && link.priority !== 'off');
+
+      // Load the high priority modules first
+      const highPriorityPromises = linksToLoad.map(link => {
+        if (link.priority === 'high') {
+          return moduleLoader.load(link.loadChildren);
+        }
+      });
+
+      Promise.all(highPriorityPromises).then(() => {
+        // Load the low priority modules after the high priority are done
+        const lowPriorityPromises = linksToLoad.map(link => {
+          if (link.priority === 'low') {
+            return moduleLoader.load(link.loadChildren);
+          }
+        });
+        return Promise.all(lowPriorityPromises);
+      }).catch(err => {
+        console.error(err.message);
+      });
     }
   };
 }