Lazy Laden Angular Direktiven in ui-Router als Webpack Chunks

Question

Ich versuche, eine Angular-Direktive als Webpack Chunk Lazy zu laden.

Hier ist mein aktueller Konfigurationsversuch mit ocLazyLoad:

// Basic Config 
function routingBase($urlRouterProvider, $locationProvider, $stateProvider) { 

    $locationProvider.html5Mode(true); 

    $stateProvider 
     .state('home', { 
      url: '/home', 
      template: '<app-main></app-main>', 
      resolve: { 
       load: ($q, $ocLazyLoad) => { 

        let deferred = $q.defer(); 

        require.ensure([], (require) => { 

         // Load entire module 
         let module = require('../modules/main'); 

         $ocLazyLoad.load({ 
          name: module.name 
         }); 

         deferred.resolve(module); 

        }, 'app-main'); 

        return deferred.promise; 
       } 
      } 
     }) 
} 

Das geht in myModule.config(routingBase);.

../modules/main ist nur ein Winkelmodul, das eine Richtlinie exportiert (zB export default angular.module('main',[]).directive('appMain', appMainFn);.

Irgendwelche Tipps? Was erhalte ich, dass die <app-main></app-main> korrekt zu dem Dokument hinzugefügt wird, und dass der Chunk korrekt als Modul geladen wird. aber es wird nicht ersetzt (er bleibt als <app-main></app-main>).

möchten Sie eine andere Methode für verzögertes Laden Stücke empfehlen (vielleicht $compileProvider verwenden)? ich möchte die sauberste Weg.

Vielen Dank fo r deine Hilfe.

Answer 1

Ich konnte dies in meinem aktuellen Projekt arbeiten. Ändern Sie einfach die folgende Zeile und sehen Sie, wie es funktioniert. Sie müssen auch Standard hinzufügen, da Sie das angulare Modul als Standard exportieren. Prost!

$ocLazyLoad.load({ 
name: module.default.name 
});