无法让angular组件路由器在延迟加载组件的情况下工作
无法让angular组件路由器在延迟加载组件的情况下工作
提问于 2016-05-06 17:29:28
你好，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一起工作，所以我将它加载到主控制器中，并在加载器属性中引用它。在那之后，当我最终让它在loader propety中工作时，我似乎不能让它真正地加载组件，我一直收到这个错误：
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 component router是否为时过早。所以我真的很想听听其他经验丰富的angular程序员对这个问题的看法。
编辑:有人对这件事有什么见解吗？
回答 1
Stack Overflow用户
发布于 2016-09-14 21:09:06
您可以使用$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中注入你的依赖项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37068868
复制相关文章
相似问题
腾讯云开发者
