Code, Angular, iOS and more by Aviv Ben-Yosef

What is the Component Router? Can you start using it?

| Comments

Update: The component router has finally been officially deprecated and discontinued. You should not be using it. This post is here for posterity’s sake, but it goes to show how flakey our industry can really be.

A new router for Angular 1.x was announced over a year ago. That router is usually called the Component Router, but you may have seen the name “new router” (or ngNewRouter) thrown around.

Its release keeps getting delayed. Documentation is scarce. The GitHub repo is abandoned.

I keep seeing people wondering whether they should be using it and how. Let’s try and answer those concerns.

What is different about it?

The component router is aimed to make routing easier in a world of components, like the awesome ones we got in 1.5.

It has some similarities to the Angular 2 router.

The component router also incorporates some features that have long been considered a standard in ui-router, such as nested routes.

The gist is that you define a root component – that’s the component that starts all your app’s rendering.

In it you render sub-routes using an outlet (<ng-outlet></ng-outlet>), much like the old ng-view or ui-router’s ui-view.

But, you can keep on nesting these outlets, which isn’t possible with ng-view.

You can read more in the design doc.

Can you start using it?

Well, it hasn’t been released yet, but according to the Angular weekly meeting notes it should be out very soon.

I wouldn’t start writing code in it just yet, but you should definitely spend a few minutes reading the code of this demo by one of the Angular core maintainers.

And if you really want to play with it, that demo is a good starting point.

Once it’ll be out officially (hopefully in a couple of weeks) check this space for more information on using it and migrating your existing apps to it.

Do you have a big Angular 1.x app that you’re scared will rot and become legacy code? Because 2.0 and TypeScript will soon be the new shiny yet you have all this JS code sitting there? Where will your team find the time, and management approval, to learn and move things to 2.0?

But what if you could migrate your project, incrementally, while keeping your time’s pace and shipping awesome code? What if your team could learn a bit more Angular 2 with each task? Imagine you could get to be working in 2.0 land without ever stopping your development!

I’m cooking up a self-served course that will get you there. It will allow you, on your own pace, learn Angular 2 and TypeScript bit by bit. With those steps your team will migrate your project and soon you’ll write all your new code with Angular 2, TypeScript, and won’t have to stay behind.

Sign up to be notified when the course is ready (and get more of these pragmatic Angular posts in the meantime).

Learn how to upgrade your Angular 1 app easily, step by step!