如何让组件路由器 $router 与 Webpack 和 ocLazyLoading 一起使用?

Posted

技术标签:

【中文标题】如何让组件路由器 $router 与 Webpack 和 ocLazyLoading 一起使用?【英文标题】:How do I get Component Router $router to work with Webpack & ocLazyLoading? 【发布时间】:2017-01-20 01:11:22 【问题描述】:

我正在尝试让我的 Angular/Webpack/ocLazyLoad 应用程序正常工作。我的应用代码如下所示:

var app = angular.module('app', ['oc.lazyLoad', 'ngComponentRouter']);
app.config(function ($locationProvider) 
$locationProvider.html5Mode(true);
);

app.value('$routerRootComponent', 'app');

app.component('app', 
template: [
'<a ng-link="[\'Home\']">Home</a> |',
'<a ng-link="[\'Heroes\']">Heroes</a> |',
'<a ng-link="[\'CrisisCenter\']">Crisis Center</a>',
'<hr>',
'<ng-outlet></ng-outlet>',

].join('\n'),

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

$router.config([
    path: '/', name: 'Home', component: 'home', usaAsDefault: true,

    //Heroes Route
    
        path: '/heroes/...',
        name: 'Heroes',
        loader: function () 
            // lazy load Heroes
            /*return $ocLazyLoad.load([require('heroes.module')])
                .then(function () 
                    return 'heroes';
                );*/
        
    ,

    //Crisis Center Route
    
        path: '/crisis-center/...',
        name: 'CrisisCenter',
        loader: function () 
            // lazy load CrisisCenter
            /*return $ocLazyLoad.load([require('')])
                .then(function () 
                    return 'crisisCenter';
                );*/
        

    

    ]);
 ]

 );

但我收到 $router 的未知提供程序错误。代码调试完美并达到了我的代码的特定点,但我无法让它与 Webpack 一起工作(在我实现它之前它工作)

提前致谢!

【问题讨论】:

【参考方案1】:

$router 更改为$rootRouter解决了这个问题。

【讨论】:

以上是关于如何让组件路由器 $router 与 Webpack 和 ocLazyLoading 一起使用?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 react-router-dom 卸载路由更改上的组件而不是重新渲染 [重复]

如何通过仅在react-router-dom中使用slug的路由访问不同的组件?

Angular 1.5 组件路由器兄弟组件

vue_路由Router

带有<router-link>的自定义Vue库组件,如何同步路由器状态?

ReactReact全家桶路由简介与React Router 5