Angular 2 Router and regular expressions

Angular 2 Router and regular expressions: Since beta.9 the Angular 2 Router provides the possibility to use regular expressions.

That is one of the features i’ve waited for. Because I need SEO friendly URLs for some of my projects.

Today I would like to show you, how to use regular expressions with the Angular 2 Router.

Use case

I would like to use SEO friendly URLs like /products/my-awesome-product-1234 on my website.

Prerequisites

First of all, it is really important to use the Angular 2 version beta.9 or higher, I tested it with beta.12.

The comment in the commit 75343eb says:

I tried it that way and all I’ve got was a Typescript Error: Type ‘string’ is not assignable to type ‘GeneratedUrl’. But I found a workaround for this error.

Create the Project

I start and create a new project with Angular-CLI.

  • install -g angular-cli
  • ng new ng2-router
  • cd ./ng2-router
  • ng g component products

Define RegEx and Serializer

I start to configure my SEO friendly route in ./src/app/ng2-router.ts.

  • Line 3: import Products module that will display product information
  • Line 4: import Generated Url to prevent the Typescript compilation error, maybe it will be removed in future versions or someone can show another solution in the comments!
  • Line 16: RegEx to split the Url into variables, in my case I would like to get the product name (([A-Za-z-]*)) and the product id (([0-9]*)) from the second part of the URL
  • Line 18 – 20: a serializer function to generate SEO friendly URLs with the routerLink directive
  • Line 21: add a name for the route to generate links with the RouterLink directive

Get values from RegEx Matches

Ok, the next step is to read the parameters and use it in the Products module. I open the file ./src/app/products/products.ts.

  • Line 2: import the RouteParams service and the RouterLink directive
  • Line 10: pass the RouterLink directive into the component
  • Line 18: Use Dependency Injection to get the RouteParams service
  • Line 19: get the ‘1’ parameter, that is the first match of the regular expression (I don’t know if there’s a possibility to name the parameters) and represents the product name
  • Line 20: get the ‘2’ parameter that represents the product id, and cast it to number (+)

Define SEO friendly links in HTML

I open the file ./src/app/products/products.html.

  • Line 2: display the product name
  • Line 4: display the product id
  • Line 7: generate a link to a product with another id (I keep the name from the current product) with the routerLink directive. The first parameter must be the name of the route I want to generate. And the second one is an object with names and values for the variables we want to use in the serializer /products/${params['1']}-${params['2']} (to keep things simple I use the same names as the names from the RegEx matches)

Result

I start the app with the command ng serve and go to the URL http://localhost:4200/products/my-awesome-product-1234.

Angular 2 Router

That is exactly what I wanted!

Maybe this is also an interesting article for you: Angular 2 – Seo Title, MetaDescription, MetaRobots

3 comments on “Angular 2 Router and regular expressionsAdd yours →

Comments are closed. You can not add new comments.

    1. no, I will rewrite this post with the current Router. But first I have to figure out if they still have the possibility to use regex.