Problems with dynamically loaded state
Solved!Posted in General by Peter Hedberg Wed Oct 28 2015 10:43:46 GMT+0000 (Coordinated Universal Time)·3·Viewed 2,420 times
I have a kind of plugin architecture where I want to be able to upload JS-files with modules and load all those in my app.
I have this function in my app:
app.run(function loadPlugins($http, $ocLazyLoad) {
return $http.get('api/plugins').then(function (response) {
$ocLazyLoad.load(response.data);
});
});
A typical (and minimal) plugin could be:
angular.module('app.plugin.foo', []).config(function ($stateProvider) {
$stateProvider.state('app.secure.foo', {
url: '/foo',
template: '<h1>Foo</h1><p>Bar</p>'
});
});
This works fine as long as I'm in the app and navigate to /foo. But if I go to /foo from outside my app or when I'm on the page /foo and press F5, it doesn't work. I guess the URL is resolved before the $ocLazyLoad magic.
The app doesn't know about the dynamically loaded states. I need to do all lazy loading before the URL is resolved. Is this possible?
Sorry about the markdown there...
Yes, you need to use the resolve property in your route: https://oclazyload.readme.io/docs/with-your-router and to make sure that you return the promise.
marked this as solved
That doesn't help me. I have the entire state definition in the lazy loaded file. I've made an example: http://plnkr.co/U00y7BlcyUZGM63crbWw.
The problem is more visible there - the link to the plugin doesn't get a href by ui-sref, but it is still possible to click on it.