Problems with dynamically loaded state

Posted in General by Peter Hedberg Wed Oct 28 2015 10:43:46 GMT+0000 (Coordinated Universal Time)·3·Viewed 2,538 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: loadPlugins($http, $ocLazyLoad) { return $http.get('api/plugins').then(function (response) { $ocLazyLoad.load(; }); }); A typical (and minimal) plugin could be: angular.module('', []).config(function ($stateProvider) { $stateProvider.state('', { 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?
Oct 28, 2015

Sorry about the markdown there...

Oct 28, 2015

Yes, you need to use the resolve property in your route: and to make sure that you return the promise.

marked this as solved
Oct 28, 2015

That doesn't help me. I have the entire state definition in the lazy loaded file. I've made an example:

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