Future States & OcLazyLoading

[MacrofonoEstudio]

Hi Ui-routers,

Thank you for your great work!

I'm trying to get Future States & OcLazyLoading working together like this:

In app.router.js

$stateProvider
                .state('child', <ng.ui.IState> {
                    name: 'child',
                    url: '/child',
                    lazyLoad: ['$ocLazyLoad',function($ocLazyLoad) {                            
                            return  $ocLazyLoad.load(['app/js/components/view/view.routes.min.js'])
                        }]
                    }

In view.routes.min.js

(function () {
      let childState = {
        name: 'child',
        url: '/child',
        component: 'viewChild', 
        resolve: {
          childData: ($ocLazyLoad) => $ocLazyLoad.load(['app/js/components/view/child/child.component.min.js','app/js/components/view/child/child.module.min.js'])
          }
      };

      let states = {
        states: [ childState ]
      };

    return states;      
    })();

And... Is not working. Could you point me in the right direction?

Thanks!

[christopherthielen]

Is any of it working? Do you get any error messages?

Here's a plunker that demonstrates lazy loading angular 1 module: http://plnkr.co/edit/a3r5BY4o669RBAm8plKI?p=preview

---

I see one problem with lazy loading the viewChild component. In beta.3 and earlier, views templates are computed pretty early during the transition (onStart phase), but resolves are not processed until later (onEnter).

See my analysis of the bug here: #3102 (comment) and the fix here: #3134

The issue described in #3102 is fixed in master and will be part of beta.4. You can work around the problem in beta.3 by adding resolvePolicy: { childData: { when: 'EAGER' } } to your state.

---

Let me know if this helps. If not, please provide more information about how it's failing.

[MacrofonoEstudio]

Hi Christopher,

Thank you very much for your quick response, it works for parent states but I can't get it working on child states:

app.router.js WORKS OK!

.state('section1', <ng.ui.IState> {
                    name: 'section1',
                    url: '/section1',
                    lazyLoad: (transition) => transition.injector().get('$ocLazyLoad').load(['app/js/components/view/section1/section1.component.min.js','app/js/components/view/section1/section1.module.min.js'])
                })

section1.module.js WORKS OK!

angular
    .module("section1", ['ui.router'])
    .config(['$stateProvider',($stateProvider) => {
      $stateProvider
        .state('section1', {
          url: '/section1',        
          component: 'viewSection1'
        })
        .state('section1.subsection1', {
          url: '/section1/subsection1',        
          lazyLoad: (transition) => 
                transition.injector().get('$ocLazyLoad').load(['app/js/components/view/section1/subsections/subsection1/subsection1.component.min.js','app/js/components/view/section1/subsections/subsection1/subsection1.module.min.js'])
        })
    }])
    .component('viewSection1', Section1Component);

subsection1.module.js DOESN'T WORK

angular
    .module("subsection1", ['ui.router'])
    .config(['$stateProvider',($stateProvider) => {
      $stateProvider
        .state('section1.subsection1', {
          url: '/section1/subsection1',        
          component: 'viewSubsection1'
        })        
    }])
    .component('viewSubsection1', Subsection1Component);

If I change the subsection1's state from "section1.subsection1" to "subsection1" works.

Am I doing something wrong?

Thanks again for your great work :)

Aleix

[christopherthielen]

@MacrofonoEstudio
are you trying to activate the nested lazy loaded state by URL or by ui-sref? There is a bug in nested lazy loaded states in beta.3, which will be fixed in beta.4: #3146

If you would like to try building ui-router yourself to test if the fix for #3146 fixes your situation, you can do so by following the development instructions

If you try building yourself, let me know if there are any issues with the instructions.

[MacrofonoEstudio]

Hi @christopherthielen ,

Thank you for your reply, I'm trying it by ui-sref.

I have tried to the onEnter property too, but I can't get it working (doesn't console any error).

I've also tried the fix (ui-router/react#7) but no luck.

I've come with a temporary solution emulating a parent state with the redirect property:

$stateProvider
              .state("transfers", <ng.ui.IState> {
                params: {
                  state: "home",
                },
                redirectTo: (trans) => {
                    let childStateToRedirect = trans.params().state;
                    return { state: childStateToRedirect };
                },
                url: "/transfers/:state",
              })

When do you plan the next release that fixes this issue?

Thank you very much!

[MacrofonoEstudio]

Hi @christopherthielen ,
Any new on this?
Thanks and happy new year

[christopherthielen]

RC.1 is released. Try it now!

Note the breaking change in release notes about future states:

Previously, a state with a lazyLoad function was considered a future state.
Now, a state whose name ends with .** (i.e., a glob pattern which matches all children) is considered a future state.
All future states should be given a name that ends in .**.

If this works for you now, can you close it? If not, can you post a plunker that reproduces the issue?

Thanks!

[serkanyersen]

@christopherthielen .** works. can you update this plunker http://plnkr.co/edit/a3r5BY4o669RBAm8plKI?p=preview

because it stopped working and I was trying to figure out what the problem was until I've found this comment.

Thanks

[christopherthielen]

@serkanyersen I updated it, thanks for the note!

[serkanyersen]

Thanks.

[raviteja-kvns]

@christopherthielen
The pluker example you have provided is working great.
But there is one problem I face when the internet disconnects.

I have written my code as in your example,
I have disconnected the internet and tried, then loading fails [Expected Result]
Retry to click lazy after connecting to the internet, then it is not reattempting to fetch those files again.
[ I think that in the ui-router documentation that the future state, i.e. which is declared as 'somestate.**'' will be destroyed once executed, this could be the case]

But my concern is that 'somestate.**' is being destroyed even when the loading fails.
Is there any way around using ui-router?

In the example you have provided,
the same is working, i.e. it is reattempting to fetch them on failure.

I see that you are using @Version v1.0.0-rc.1
I am using - @Version v1.0.0-beta.3

could this be the reason?

[christopherthielen]

@raviteja-kvns it should not remove the .** state if lazy loading fails. That might have been fixed in rc.1 . The plunker above works as expected when following your listed steps:

I have disconnected the internet and tried, then loading fails [Expected Result]
Retry to click lazy after connecting to the internet, then it is not reattempting to fetch those files again.

• Load the plunker
• Disconnect internet
• Click 'lazy.foo'
• See the error
• Connect internet
• Click 'lazy.foo'
• States are lazy loaded correctly.

[lilstargazer]

@christopherthielen
I know this has been closed already, but since I found a problem related to this. I thought I would post here.

Plunkr: http://plnkr.co/edit/calGSdZMXDiNwNipstYO?p=preview

Problem: Moved the nested state "lazy.foo" to the dependency module "lazyChild" and the nested state won't work.

I'm assuming because the nested state config block is run before the parent state is configured. Wondering if you happen to know a way around this problem.

Note: as shown in the plunkr. using oclazyload "serie" doesn't work.

Thanks.

It looks like an existing issue might already cover this problem: #3375