Using Routes In An Angular 2 TypeScript Application

With Angular 2 development happening in full force, I figured it was time to take a break from Angular 1 and start thinking about what it takes to make the switch over to Angular 2.  Like with most JavaScript powered applications you will have a single page composed of partial routes and views.  I previously wrote about how to navigate with the Angular 1 UI-Router, but in Angular 2 things are pretty different.

Here we’re going to take a look at using routes and views to navigate within our Angular 2 TypeScript application.

UPDATE 11/11/2016: This article has since been updated to use the stable Angular 2 Router component.  The latest version is titled Navigating a Web Application with the Angular 2 Router and will offer the best results.  Only use this now obsolete tutorial as a learning booster.

Before going forward, this tutorial assumes you have the necessary Node.js dependencies installed and have at least a basic understanding of writing applications with Angular 2 and TypeScript.

Creating A New Project

Let’s go ahead and start a new Angular 2 project.  Create a new directory on your desktop called RouteProject and initialize a new NPM package.json file in it by running the following:

Our project will require various Angular and TypeScript dependencies, all of which can be downloaded via the following commands in your Terminal or Command Prompt:

Inside your package.json file you’re going to want to find the scripts property and replace it with the following:

This allows us to compile our TypeScript application and watch for changes as well as run a simple local server for testing our application.  Because of the --open=src tag we can see that all our source files will be in a src directory at the root of our project.

Inside our project’s src directory we need to create two files.  The first file we need to create is tsconfig.json and it should contain the following code:

The above JSON is just configuration data for TypeScript which will be used to compile our code.

The second file we need to create is index.html and it should contain the following code:

The code here is pretty much just parent declarations.  It is responsible for including our JavaScript libraries and importing our main TypeScript file src/app/app.ts for use.

Before going any further take note of the <my-app> tags.  We will be defining those tags in the src/app/app.ts file.

Defining Parent Application Logic

Let’s jump right into our main TypeScript file.  Open src/app/app.ts and include the following code:

So what exactly is the above monster doing?

First off we’re injecting both our Angular 2 dependencies and then the Route dependencies that we plan to use.  Yes, Route has a lot of dependencies, more than I would hope for, but at this time it is what’s necessary.

Above we’re importing two views that we plan to use for routes.  We haven’t created them yet, but at least they will be ready for navigation when we do.  The two views will be a default page and then some secondary page.

Here we are defining our application component.  Remember in the src/index.html file we made use of the <my-app> tags?  This is where we crafted it and anything in this src/app/app.ts file will be injected into them.  We’re also defining a template of HTML code which we’ll see next.

In the above snippet we are defining the two routes.  Earlier in the file we included the route files, but now we’re defining how these files will be rendered.  When a user hits the / endpoint the Default component will be shown.  When the user hits the /page2 endpoint the Page2 component will be shown.

Finally we are creating our application class and bootstrapping it.

Creating Our Parent Application View

Now let’s circle back to that ./app/app.html file I told you about earlier.  This is going to be our parent template and navigation file.  It contains the following source code:

The above template code is nothing magical.  It serves its specific purpose.  Show two links for navigating between routes and then host a router-outlet for containing the child views.  This is similar to the <div ui-view> tags from Angular 1.

Creating Our Default Child View

With the application level stuff out of the way, let’s take a look at the two views that we’re going to route to.  Starting with the default view, go ahead and create a src/app/default directory.  In it you’ll have a src/app/default/default.ts and src/app/default/default.html file.

The src/app/default/default.ts file will contain the following source code:

Nothing fancy here.  We are just naming our component and determining where our HTML template will be stored.  Now crack open the HTML file that goes with it and add this code:

Again, nothing fancy.

Creating Our Secondary Child View

Now we can work on our second and final route.  Create a src/app/page2 directory with src/app/page2/page2.ts and src/app/page2/page2.html in it.  I’m sure you can see the trend now.

Starting with the TypeScript file, include the following code:

Pretty similar to what we did in the default route.  Open your HTML file and add the following short line of code:

At this point in time our application is complete!

Testing The Application

With the project root as your current working directory in your Command Prompt or Terminal, execute the following:

Since we have the command watching for changes, go ahead and open another Command Prompt or Terminal and run this:

If it didn’t already do this for you, open a web browser and navigate to http://localhost:8080/src/ to test out the application.

Conclusion

Although not difficult, it did take a bit of effort to be able to route to different views in our Angular 2 application.  This allows us to have a single page application like what we had in Angular 1 with the UI-Router.  Working with partials and routes is incredibly convenient when developing front-end applications.  It reduces the amount of code you use and typically makes your project more organized and efficient.

Nic Raboy

Nic is a skilled application developer who has released several native and hybrid mobile applications to iTunes and Google Play. He writes about his development experiences related to making web and mobile app development easier to understand and has experience in Android, Node.js, Apache Cordova, Java, NoSQL, SQL, GoLang, NativeScript, and Unity3D.

  • Thanks

  • Peter Kassenaar

    Nice article, just two days late however ;-).

    I just wasted 3-4 hrs (literally) this week trying to solve the routing-problem in Angular2. I was constantly getting the error “Error during instantiation of Location! (RouterLink -> Router -> Location).”

    If you also run into this issue, it appears to be VERY IMPORTANT that you also have a tag in your index.html, to correctly set the root of the application. Without this tag, everything goes up in smoke (at least, in my app).

    Keep up the good stuff,
    Peter.

    • Yea this was a nightmare to figure out.

      Thanks for adding your two-cents 🙂

  • The routing in this tutorial is the only one I’ve found, with working routing past Angular 2 alpha 41. All the other examples dont use the LocationStrategy, for the bootstrap, they only have “bootstrap(App, [ROUTER_PROVIDERS]);”. Is the “LocationStrategy” new?

    • That is the problem with alpha / beta technologies. They change at any given time. I believe LocationStrategy is new and it probably won’t be last addition when it comes to Angular 2.