ResolvePolicy NOWAIT - promise not injected as binding to component

[aj-dev]

This is related to the previous issue I had #3243 using

resolvePolicy: {
    when: 'LAZY',
    async: 'NOWAIT'
}

The fix seems to be working fine when data promise is injected into controller defined on the state, but that's not the case when using Angular component's controller https://plnkr.co/edit/2EbaCl?p=preview

dataPromise resolve is correctly injected into onEnter hook but not as a binding to partial component's controller.

[christopherthielen]

This one's a mystery to me. The value is on $resolve but it's not being bound to the input.

[kyse]

Which version of angular are you using? Does this relate at all to the need to use $onInit to access bindings in the controller now in angular 1.6 by chance?

[aj-dev]

After some trial and error, I have discovered that the issue is caused by data prefix in resolve name, e.g. dataPromise. From Angular's perspective, it is the same as data-promise attribute from which the data prefix gets removed when creating the binding.

So the binding should be promise: '<' instead of dataPromise: '<' and component controller's $onInit() should have this.promise.then() instead of this.dataPromise.then().

Having said that, I think it's worth adding a few lines to the documentation, warning against use of the data prefix in resolve names when combined with Angular components. This might save everyone some precious time.

[christopherthielen]

@aj-dev awesome! I think UI-Router can handle this by pre-prefixing data to the template if we find a resolve that starts with dataSomething or xSomething. Instead of generating data-something or x-something we can generage data-data-something and data-x-something.

[aj-dev]

@christopherthielen indeed, always pre-prefixing data sounds like the best solution! Are you still going to release this fix in RC-2?

[christopherthielen]

Yes. this fix will be in the next release. (RC.2? final?)

[CarterLi]

Just upgraded ui-router to 1.0.0. x-my-component broke my CSS files which expect an element named my-component

Any option reverts this to the old behavior?

@christopherthielen

[aj-dev]

@CarterLi you should not rely on custom component names crated by a 3rd party lib in your CSS. IDs and classes are the way to go.

[CarterLi]

@aj-dev But I can't add IDs, classes to the generated element either.

I have to style it, which have no height, display: inline by default.

[aj-dev]

@CarterLi take a look at the feature request here #3385. That should solve your issue once implemented.

[CarterLi]

No.

A component ( custom element ) should be self-contained. It should be able to style itself without expecting any additional code from its user.

---

For example:

A div have its own style display: block by default. Its users don't bother adding something like class="display-block"

[kaero598]

The fix totally breaks routed components styling in Angular 1.x.

This is not the case for Angular 2 since we could write something like :host { <whatever styling applies to component itself> }. But Angular 1.x does not have such a feature and using direct component tag names in CSS is the only way of styling routed components.

I believe the fix should provide some configuration option to turn prefixing component tag names on or off.

[aj-dev]

I think what we need for NG1 is the ability to declare component attributes just like we can do with bindings:

.state('userlist', {
    url: '/users',
    component: 'users',
    // the `users` input binding on the component receives 
    // the `userlist` resolve value (from the state)
    bindings: {
        users: 'userlist'
    },
    // predefined component attributes for styling and other purposes
    attributes: {
        class: 'css-class',
        id: 'css-id'
    },
    resolve: {
        userlist: function(UserService) {
            return UserService.list();
        }
    }
});

[christopherthielen]

@CarterLi I'm happy to add a feature flag for this. Please open a new issue