Problems with dynamically loaded state

Solved!
Posted in General by Peter Hedberg Wed Oct 28 2015 10:43:46 GMT+0000 (UTC)·3·Viewed 1,410 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?
Peter Hedberg
Oct 28, 2015

Sorry about the markdown there...

Olivier Combe
Oct 28, 2015

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.


Olivier Combe marked this as solved
Peter Hedberg
Oct 28, 2015

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.

Markdown is allowed