There are two types of 404 routes that we want to handle.

• Static 404 – the URL the user navigates to doesn’t match any route
• Dynamic 404 – the URL matches a route, but the data associated with that route does not exist. For example, you navigate to a detail page with an ID, but no item exists with that ID.

For this post, I assume that there is a component named NotFoundComponent that is the not found page to show the user. Replace this with whatever component

Static 404 routes

To set up a static 404 page, you need to add two routes to your RoutingModule configuration.

const routes: Routes = [
    // Other routes
    { path: '404', component: NotFoundComponent },
    { path: '**', component: NotFoundComponent }
]

We used a catchall route '**' that matches whatever route didn’t match above, and shows our not found page.

Make sure to keep the catchall route at the end of your routes, otherwise the routes below it will not be accessible.

Another option here would’ve been to redirect the user to the '404' route, but that way you lose the context of the URL. If the user navigates back, he would go to the non-existing route and be redirected to the '404' path again. If this is the behavior you want, switch the last route with { path: '**', redirectTo: '404' }.

Dynamic 404 routes

Now that we have the static 404 route configured, we can use the router to navigate to it whenever we want to show the not found page to the user.

this.router.navigate(['/404'], { skipLocationChange: true });

By using the option skipLocationChange: true, we have the same behavior as mentioned above. Even though the router navigates to the route, the browser URL stays the same, allowing the user to easily go back.

Personalizing the 404 message

You may want to personalize the message shown on the 404 page. One way to do this is using the navigation state.

When navigating to the 404 page, you can include a state in the navigation options.

this.router.navigate(['/404'], { 
    skipLocationChange: true,
    state: {
        // Whatever data you need on the 404 page
    	source: 'article',
        id: 123456
    }
});

On your NotFoundComponent, you can access this object in the constructor using the router’s getCurrentNavigation method.

export class NotFoundComponent {
  constructor(private router: Router) {
    console.log(this.router.getCurrentNavigation().extras.state.source);
  }
}

You must access the state in the constructor, as it is only available while the router is navigating.

Conclusion

In this post, we saw how to implement a 404 route in Angular. We looked at how we can redirect to it dynamically and even how to personalize the 404 page with route dependent data!

Have questions, corrections, or an alternative way of handling this? Leave a comment or reach out to me on Twitter @pedronavelopes and let me know! Thanks for reading!

The post Handling not found routes in Angular appeared first on Blog IT.

• This enables you to have an Angular application alongside your Umbraco website, on a specified route.
• The Angular App can be protected by the Authentication of your website, if you have it. And you can make use of surface controllers for authenticated requests.
• The routing of your app will work as intended, for example, if your Angular app is at /app and you make a request to /app/products, the request will be routed to the angular app products’ page.

What this is not

• A complete front end for a Umbraco website with dynamic routes.
• This doesn’t have dynamic routes, you have to specify them on your code.

Let’s get started!

First, start by creating a controller to handle the Angular App request.

using System.Web.Mvc;

public class AngularAppController : BaseController
{
    public ActionResult AngularAppView()
    {
        return View();
    }
}

Then, you have to decide the route where your Angular app will render. On this example it will be /angularapp.

On your ApplicationStarted method, put this code:

RouteTable.Routes.MapRoute(
  "AngularApp",
  "angularapp/{*.}",
  new { controller = "AngularApp", action = "AngularAppView" });

The {*.} syntax is what makes your angular app routes load and not return the 404 page.

If you don’t have an ApplicationStarted method, find out how you to create it here: https://our.umbraco.org/documentation/reference/events/application-startup

Under your Views folder, create a folder with the same name as the controller you set in MapRoute. In this case it will be “AngularApp”.
Inside it, create a view with the same name as the action set you set in MapRoute.

Inside the view put the contents of the index.html of your angular app.
Then you will need to move your angular app files somewhere like you /Assets folder, and edit their paths on the view.

Almost done!

Now you need to edit the routes of your Angular app.
Simply add the route you chose as a prefix to the routes.

From something like this:

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: '/dashboard', component: DashboardComponent },
  { path: '/detail/:id', component: HeroDetailComponent },
  { path: '/heroes', component: HeroesComponent }
];

To this:

const routes: Routes = [
  { path: 'angularapp', redirectTo: 'angularapp/dashboard', pathMatch: 'full' },
  { path: 'angularapp/dashboard', component: DashboardComponent },
  { path: 'angularapp/detail/:id', component: HeroDetailComponent },
  { path: 'angularapp/heroes', component: HeroesComponent }
];

Thanks for reading!
Mário

The post Adding an Angular app to your Umbraco Website appeared first on Blog IT.