Angularjs 如何让Component Router$Router与Webpack&;懒散的装载?
我正在尝试让我的Angular/Webpack/ocLazyLoad应用程序工作。我的应用程序代码如下所示:Angularjs 如何让Component Router$Router与Webpack&;懒散的装载?,angularjs,webpack,components,router,oclazyload,Angularjs,Webpack,Components,Router,Oclazyload,我正在尝试让我的Angular/Webpack/ocLazyLoad应用程序工作。我的应用程序代码如下所示: var app = angular.module('app', ['oc.lazyLoad', 'ngComponentRouter']); app.config(function ($locationProvider) { $locationProvider.html5Mode(true); }); app.value('$routerRootComponent', 'app');
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';
});*/
}
}
]);
}]
});
var-app=angular.module('app',['oc.lazyLoad','ngComponentRouter']);
app.config(函数($locationProvider){
$locationProvider.html5Mode(true);
});
app.value(“$routerRootComponent”,“app”);
app.component('app'{
模板:[
“家”,
“英雄”,
“危机中心”,
“
”,
'',
].join('\n'),
控制器:['$router','$ocLazyLoad',函数($router,$ocLazyLoad){
$router.config([
{path:'/',name:'Home',component:'Home',usaAsDefault:true},
//英雄路线
{
路径:'/heroes/…',
名字:'英雄',
加载器:函数(){
//懒汉
/*返回$ocLazyLoad.load([require('heromes.module')]))
.然后(函数(){
回归"英雄",;
});*/
}
},
//危机中心路线
{
路径:“/危机中心/…”,
名称:“CrisCenter”,
加载器:函数(){
//延迟加载CrisCenter
/*返回$ocLazyLoad.load([require(“”)])
.然后(函数(){
返回“CrisCenter”;
});*/
}
}
]);
}]
});
但是我得到了$router的未知提供程序错误。代码调试得很完美,达到了我代码中的特定点,但我无法让它与Webpack一起工作(在我实现它之前它就工作了)
提前谢谢 将
$router
更改为$rootRouter
解决了问题。将$router
更改为$rootRouter
解决了问题