2

大家好，stackoverflowers，我已经尝试了一段时间，但没有成功使用新的组件路由器（ngComponentRouter）实现角度组件的延迟加载。这是我用于配置主要组件的代码：

//define main app component 
    app.value("$routerRootComponent","simpleTrackerApp");
//main app component config
    
    var lazyLoaderMod = null;
    var httpService = null;
    
    app.component("simpleTrackerApp", {
        /*@ngInject*/
        controller:function ($ocLazyLoad,$http) {
            lazyLoaderMod = $ocLazyLoad;
            httpService = $http;

        },
        templateUrl: CONFIG_APP_SHARED_URL + 'mainComponent/simpleTrackerApp.html',
        $routeConfig: [
            { 
                useAsDefault:true,
                path:"/bugs", 
                name:"Bugs",
                loader: function () {
                    return lazyLoaderMod.load(CONFIG_APP_COMPONENTS_URL + 'bug/bugs/bugsCtrl.js');
                }
            },
            {path:'/**',redirectTo:['Bugs']}
        ]
    });

我的第一个问题是我无法让它与注入加载器属性的 ocLazyLoad 一起工作，所以我将它加载到主控制器中并在加载器属性中引用它。在那之后，当我终于让它在加载器属性中工作时，我似乎无法让它真正加载组件，我一直收到这个错误：

lib.js:2 TypeError: Cannot read property 'then' of undefined
    at e._loader (http://simpletracker.co.il/client/production/app/lib.js:9:10670)
    at e.resolveComponentType (http://simpletracker.co.il/client/production/app/lib.js:9:21463)
    at e.recognize (http://simpletracker.co.il/client/production/app/lib.js:9:23535)
    at http://simpletracker.co.il/client/production/app/lib.js:9:25949
    at Array.forEach (native)
    at e.recognize (http://simpletracker.co.il/client/production/app/lib.js:9:25921)
    at e._recognize (http://simpletracker.co.il/client/production/app/lib.js:10:4834)
    at e.recognize (http://simpletracker.co.il/client/production/app/lib.js:10:4605)
    at t.e.recognize (http://simpletracker.co.il/client/production/app/lib.js:10:13656)
    at http://simpletracker.co.il/client/production/app/lib.js:10:10757

现在我明白我显然在加载程序中做错了，我需要以某种方式注册组件。但我找不到任何关于加载器的角度文档，也没有其他人使用新路由器延迟加载组件，所以我真的不知道如何实现这一点。

我真的很感激这方面的一些帮助，但我通常也想知道使用角度组件路由器是否为时过早，因为它缺乏文档和支持。所以我真的很想听听其他有经验的 Angular 程序员对此事的看法。

编辑：有人对此事有任何见解吗？

4

1 回答 1

0

您可以使用$router而不是 http 服务。应用于您的代码：

app.component("simpleTrackerApp", {

templateUrl: 'mainComponent/simpleTrackerApp.html',

controller: ['$router', '$ocLazyLoad', function ($ocLazyLoad, $http) {

    $router.config([
        {
            path: '/bugs/',
            name: "Bugs",
            loader: function () {
                return $ocLazyLoad.load('/bugsFolder/bugs.component.js') //no url, set the path to your component 
                    .then(function () {
                        return 'bugs' //name of your component
                    })
                }
            }

        ])

    }],

});

并且不要忘记在 app.module 中注入您的依赖项。

于 2016-09-14T13:09:05.910 回答