Path aliases to paths in angular

Question

I'm trying to make URL aliases in an angular 6 application. The problem is the following:
I have a URL in my angular app defined as article/:id , that maps to a component called ArticleViewComponent , but, the thing is I'm trying to make a different url where I can send the title of the article as the path for the article. For example, if I have an article called Article about angular with id 1 , I want the URL to be /article/article-about-angular and still map it to the article with id 1 (because the id is what the API handles, not the title). Thanks in advance for your help, I know this seems impossible.

Answer 1

You can have them both map to the same component using article/:id as you are already using. Instead of just being a numeric id, this will now contain either an article title or a numeric id. Then when fetching the article, simply handle it differently based on whether the id is a number or a string:

// Check if id is "not a number"
if(isNaN(id)) {
    // Define a function to convert from titles to id numbers
    var idNumber = getIdNumberFromTitle(id);
    getArticleFromTitleName(idNumber);
} else {
    getArticleFromIdNumber(id);
}