Using Angular Router to Implement Pre-rendering Friendly Routes

Demonstrate how to configure Angular Router for search engines by creating static-like paths that can easily be pre-rendered for SEO purposes.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Define routes with static-like paths
const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products/:id', component: ProductDetailComponent },
  // Add more pre-rendering friendly routes here
];

// RouterModule configuration
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is an Angular module that sets up the router with static and parameterized paths that are friendly for pre-rendering and SEO. We define our routes with clear paths, which pre-rendering tools can easily recognize and process. The path 'home' and 'about' are perfect examples of static paths that could be prerendered, while 'products/:id' shows a parameterized route which can also be pre-rendered by using the proper tooling that generates static pages for various 'id' values.

// Server-side rendering with Angular Universal
// (located in your server.ts or similar server side file)

const { AppServerModule } = require('./path/to/app.server.module');
const { renderModule } = require('@angular/platform-server');

// Render the route and return the HTML as a string
function renderRoute(url) {
  return renderModule(AppServerModule, {
    document: '<app-root></app-root>',
    url
  });
}

// Example usage in an Express server
app.get('*.*', express.static(join(__dirname, '.', 'dist')));
app.get('*', (req, res) => {
  renderRoute(req.originalUrl).then(html => res.send(html));
});

This is an example of server-side rendering using Angular Universal. It takes the route passed in the URL, renders the application on the server, and then sends the static HTML to be displayed to the client. This process is useful for SEO because it ensures that the content of a web page is fully available to a search engine's web crawler. By prerendering all routes, we can ensure that even content that relies on asynchronous data is present in the HTML sent to the crawler.