如何让组件路由器 $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的路由访问不同的组件?