Here’s a question that comes up a lot in Slack: you have multiple views in your Polymer app and notice that anytime the URL changes, they all respond and try to update, even the ones that are not visible. What’s going on? How do you make a view truly inactive?
If you’ve started your app based on the Polymer Starter Kit then you know it provides a great out-the-box setup complete with PRPL pattern and views as separate elements for lazy-loading.
Everything works great at this early stage because the only routing involved is the top-level switching between views (or fragments), there is no routing within views. Only when you start adding some per-view routing do you run into the issue. Here’s what’s going on and how to fix it.
What makes a good client-side router? What do we even want a router to do? What is Angular2’s Component Router like and should you plan on using it?
I’ll share my own thoughts on this based on my experience of using it so far.
Once you move beyond the quick-starts and examples and start building a real app with Angular2 you soon find you need to handle things that the examples often leave out or pass over.
Securing routes with the new component router is one of these and it can be difficult to figure out. Here’s the approach I’m using which seems to be working well for me and has been reusable across multiple projects.