How to lazyload typescript modules with oclazyload in AndularJs 1.5+ and ui-router?

208 Views Asked by At

I am trying to lazyload some modules only when a page is visited because my main.js file is too big (3.4MB).

I am using AngularJs 1.6 (typescript), webpack, ui-router, and oclazyload.

oclazyload works for me when I use it for js libraries:

resolve: {
          deps: ['$ocLazyLoad',
            function( $ocLazyLoad ){
              return $ocLazyLoad.load([ './ckeditor/ckeditor.js']).then(function(){
                 $ocLazyLoad.load(['./ckeditor/config.js', './ckeditor/styles.js'])
              });
          }]
        },

but it does not work well when I use it for module.ts files:

         resolve: {
           deps: ['$ocLazyLoad',
             function( $ocLazyLoad, $state ){
               (async () => {
                 await import('../dashboard/lcses/lcses.module').then((promise)=>{
                   $ocLazyLoad.inject([promise.LcsesModule]);
                 });
               })();
               return;
            }]
          },

this code runs, but the the main.js file is still 3.4 MB, and it does not inject that module at the first time you visit.

0

There are 0 best solutions below