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に関するドキュメントが見つからず、新しいルーターでコンポーネントを遅延ロードする人は誰もいなかったので、これをどのように達成できるか本当にわかりませんでした。

これについての助けを本当に感謝しますが、一般的に、ドキュメントとサポートが不足しているAngularコンポーネントルーターを使用するのは時期尚早ではないかと考えています. ですから、他の経験豊富なAngularプログラマーから、この問題についての意見を聞きたいです。

編集:誰もがこの問題について何か洞察を持っていますか?..

4

1 に答える 1

0

$routerhttp-service の代わりに使用できます。コードに適用:

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 に答える