question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Equivalent to resolve in Component Router?

See original GitHub issue

With the removal of the @InjectPromise and @InjectLazy decorators, is there an equivalent functionality to resolve in ngRoute/uiRouter?

The angular1 version would look something like:

//controller
function MyController(foo){}

//route config
{
  controller: 'MyController',
  url: 'foos/:fooId',
  resolve: {  
    foo: function($routeParams,FooService){ return FooService.getFooById($routeParams.fooId); }
  }
}

This is IMO, one of the killer features of the current router and UI-router, as it remove async entirely from the controller and makes it super easy to test. The canActivate etc hooks cover one of the use cases for resolve (preventing access to routes/state), but I can’t see a replacement for the above case. Perhaps I’m missing something?

I’ve been tinkering with an idea like this for NG2, implementing resolve as a decorator:

@Component({ selector: 'foo-detail' })
@View({ template: '<div>{{foo.name}}</div>'})
//token : resolver : injectables
@Resolve(Foo, (params, fooService) => fooService.getFooById(params.fooId), [RouteParams, FooService])
class FooDetailComponent {
  constructor(public foo: Foo){}
}

An alternative syntax might look like:

@Resolve({
  foo(params:RouteParams, fooService:FooService){ return fooService.getFooById(params.fooId) }
})

Though that limits you to string keys and I can’t figure a way to pass bindings, and I’m not sure reflect will allow us to grab the metadata annotations this way.

Under the hood, it keeps async out of the injector, as its “simply” a matter of executing the resolver fn before passing them to the component’s overridden bindings. Thoughts?

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:13
  • Comments:37 (12 by maintainers)

github_iconTop GitHub Comments

12reactions
cquillen2003commented, Mar 11, 2016

+1 for @Resolve decorator.

Data-fetching belongs in a decorator instead of in ngOnInit() or routerOnActivate() IMHO.

5reactions
nigemancommented, Jun 23, 2016

Link to some documentation about this ? Is it purely the life cycle hooks ? And DI inject into them ? Was that the final solution ? Cheers!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 2 - equivalent to router resolve data for new router
I am playing with Angular 2.0's new router and I try to use something similar to Angular 1 ...
Read more >
Resolve - Angular
Interface that classes can implement to be a data provider. A data provider class can be used with the router to resolve data...
Read more >
Vue Router: Route Resolvers - Medium
In the most simplest of terms, I'd say a Router Resolver allows you to get data before navigating to the new route. What's...
Read more >
What and Why Angular Route Resolvers? - DZone Web Dev
A Resolver is a class that implements the Resolve interface of Angular Router. In fact, Resolver is a service that has to be...
Read more >
Refactoring Container Components to Fetch Data With Route ...
The Resolver is a class implementing the interface Resolve<T> which forces you to implement a function called resolve where you are getting ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found