Routes with trailing slash - Angular

Question

I created an Angular 12 project with scully v2.1.32 and it was working on the server, using docker and nginx to serve. However, when performing a performance test, there was always routing (301) of the route, related to trailing slash. I followed the recommendations of:

https://www.c-sharpcorner.com/article/angular-7-routing-with-preserving-trailing-slash-in-url/

Therefore, I changed all routes in Angular to "xxxx/." and insert the Location.stripTrailingSlash function as indicated in the article above. The solution worked normally in tests on localhost, with the routes appearing in the browser ending with "/" (localhost:1668/xxxx/).

The problem occurs when running "RUN npm run scully" in docker: appears the message "Route '/passeios/seleciona_regiao/.' not provided by angular app", and then a fatal error in a postProcessByHtml plugin.

Can anyone give me a tip on how to solve the situation or point me to another solution regarding trailing slash (maybe any Angular configuration)?

Installation in docker is using node:14.19.1-alpine and running:

FROM node:14.19.1-alpine as builder
RUN apk add --no-cache
  chromium
  nss
  freetype
  freetype-dev
  harfbuzz
  ca-certificates
  ttf-freefont
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
ENV SCULLY_PUPPETEER_EXECUTABLE_PATH /usr/bin/chromium-browser

Thanks

Answer 1

For SEO the most important part is that you either use a trailing slash or you don't, across your whole site to keep consistency, and that your canoncial url reflects your choice (w or w/o slash).

If you work with prerendering you'll have index.html files in subdirectories and there's a big difference in how the routing is performed by your hosting provider.

Your hosting provider will for /products look for /products/index.html and if that exists it will return a HTTP 30* redirect to /products/ in the response.

If /products/index.html doesn't exist it will look for an index.html in / and for an Angular application it will find index.html in the route directory and there would be no need to return a redirect.

Personally I wanted to go without trailing slashes but while investigating this "issue" I realised that the slash logic was related to common request mapping (using AWS Cloudfront & S3) and that messing around with Angular and Scully would more or less create more complexity than I was looking for.

For us it's important that the urls in our sitemap and canoncial urls have a trailing slash for our prerendered pages, towards google and other search engines. Crawlers are not going to hit our regular non-prerendered Angular pages anyway since we only whitelist prerendered urls in our robot.txt