延迟加载 angular 1.5 组件答案

【问题标题】：Lazy load angular 1.5 components延迟加载 angular 1.5 组件
【发布时间】：2017-11-08 18:01:58
【问题描述】：

我正在构建一个 Angular 应用程序，并且我只想在请求该路由时加载我的组件。我认为这样的事情可能会起作用

const states = [{
    name: 'login',
    url: '/login?sessid',
    component: 'login',
    resolve: {
      login: () => import('./components/login.js').then(login => {
        login.default.register()
      }),
    },
}];

登录组件在哪里

export default {
      register() {
        angular.module('trending')
          .component('login', () => ({
              template: 'Hello!'
            })
        )
    }
};

但我得到一个错误

angular.js?10a4:13708 Error: [$injector:unpr] Unknown provider: 
loginDirectiveProvider <- loginDirective

大概是因为登录组件在状态之前没有注册。我意识到这是滥用 resolve 属性的目的，我只是希望它能满足我的需要。有什么更好的方法来解决这个问题？

【问题讨论】：

github.com/ocombe/ocLazyLoad
OCLAZYLOAD 此处为示例应用程序freakyjolly.com/how-to-lazy-load-modules-controllers-angularjs

标签： angularjs webpack lazy-loading

【解决方案1】：

应用程序启动后，您无法再声明组件。因此，为了在运行时注册组件，您必须以某种方式公开相应的工厂。下面的代码公开了主应用模块上的所有工厂，但如果您愿意，也可以只使用组件的工厂。

const app = angular.module('trending', []);

app.config(($controllerProvider, $compileProvider, $filterProvider, $provide) => {
    app.register = {
        component: $compileProvider.component,
        controller: $controllerProvider.register,
        directive: $compileProvider.directive,
        filter: $filterProvider.register,
        factory: $provide.factory,
        service: $provide.service
    };
});

这样，您只需调用app.register.component 即可访问暴露的工厂。例如，取自您的问题：

export default {
      register() {
        angular.module('trending')
          .register
          .component('login', () => ({
              template: 'Hello!'
            })
        )
    }
};

您可能会找到一种更奇特的方式来注册您的模块，这只是为了回答而进行的演示，您可以更改使用的命名法，甚至更改公开机制以更好地适应您喜欢的es6+ 组件。

【讨论】：