延迟加载 angular 1.5 个组件

Question

我正在构建一个 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 属性的目的，我只是希望它能满足我的需要。解决此问题的更好方法是什么？

Answer 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!'
            })
        )
    }
};

You might find a fancier way to register your modules, this is just a demonstration for the sake of the answer, you can either change the nomenclature used or even the exposing mechanism to fit better on your fancy es6+ components.

延迟加载 angular 1.5 个组件

Lazy load angular 1.5 components

lazy-loading

angularjs

webpack