ocombe / ocLazyLoad

Lazy load modules & components in AngularJS
https://oclazyload.readme.io
MIT License
2.63k stars 510 forks source link

Dynamic Routing System Problem with ocLazyLoad #343

Open mamsoudi opened 8 years ago

mamsoudi commented 8 years ago

Hey, First of all, I wanted to thank you for what you've done and I wanted to appreciate all the things you made possible by making this awesome plugin.

But we're having some difficulties using it. First I want to explain how does our System work. We have a Fully Dynamic Routing which is a compilation of ngRouter and our own Dynamic Routing.

What we're basically doing is that we have an API that we get literally all of the page content (Directives and their positions, Models and Data, etc.) from this API.

We also have this module based system that has a core as a Shared Module that handles shared functionalities of the System, Like Routing for Example. Other modules are Different Apps. Like A CRM, E-Learning System, A Clone of Google Drive and etc.

Core handles understanding which route are we in and goes receives the relate Data for that Specific Route (like Positions, Needed Directives, etc.).

Before this, we had to load all of the js files related to each of these modules separately but at the same time before angular bootstrap. It had a very high payload for users. We decided to use your plugin to read which modules do users need from API and then load them using your plugin.

We have tried so many Different Approaches but we're devastated and we're not able to get it to work.

First, we tried to handle getting List of needed modules in "Run" phase of angular bootstrap. Everything was working except that we had to use $compile manually to compile directives that are being loaded dynamically! We did it. Everything was showing except we had this weird behaviour in Scopes of our Directives that it's sometimes because of our Approach in using them (and we don't have any other choice).

Then, we tried to take it out and move it to our main preflight service that reads data from API but because data we're being read Async we couldn't do make angular wait for both $http and $ocLazyLoad to finish and then start Compiling the View!

We also Tried moving the LazyLoad to our $routerProvider resolve config to use resolve and move $http request (that tells us which modules should be injected and reads this from API) to "Run" and connect them using a Third Factory or Service and Vice Versa but it wasn't successful because this time $ocLazyLoad was not waiting for the data of $http to finish.

Now we're using Angular Deferred Bootstrap to make sure that we take the data even before angular starts bootstrapping but we're getting this very strange behaviour from $ocLazyLoad which even loads "ng" module and reloads "itself"!

I would appreciate it if you could help up with this.

Since our System is made of so many Services and Components that are connected to each other I'm afraid I might not be able to make a plunkr that demonstrates our problem, But I will do my best to provide you one!

Thank you!