1

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.

Rounin
  • 27,134
  • 9
  • 83
  • 108
Ruofei
  • 11
  • 2
  • Likely has to do with webpack code splitting or you are using the module somewhere else. It's not TypeScript related – Aluan Haddad Jan 24 '20 at 20:57
  • 1
    Why are you mixing async await with promises? Remove the .then from your second example. It should look like await const module = import('../dashboard/lcses/lcses.module'); then $ocLazyLoad.inject(module) – Mickers Jan 24 '20 at 21:03
  • thanks for your response, I tried that, but still it gives me an error: Error: [$injector:unpr] Unknown provider: lcsesDirectiveProvider <- lcsesDirective – Ruofei Jan 24 '20 at 22:18

0 Answers0