handleUnknownRoute using a subdirectory with Scully

Question

In my Angular project I am using the following command to build the Angular project:

ng build --base-href='/mysubfolder/'

mysubfolder is the path from where the Angular site will be served i.e https:/myotherdomain/mysubfolder

myotherdomain == some other site mysubfolder == site where Angular project will be served and deployed

ng build --base-href='/mysubfolder/' command will add the /mysubfolder/ text in base href tag of every page like this:

The site is working fine so far. The problem comes when I extend this application to use https://scully.io/ to prender the Angular app. When I use the following command to prender the app:

npx scully -- 

it complains for so many weird errors related handleUnknownRoute:

⚠ handleUnknownRoute: "/mysubfolder/runtime.1e1f2c39fa49cf1c.js", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/polyfills.f7e3195ab4ce45af.js", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/main.918200bb3d790082.js", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/scripts.c48a99ff2e89312c.js", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/styles.6869685dcbc594de.css", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/runtime.1e1f2c39fa49cf1c.js", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/polyfills.f7e3195ab4ce45af.js", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/runtime.1e1f2c39fa49cf1c.js", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/polyfills.f7e3195ab4ce45af.js", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/main.918200bb3d790082.js", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/scripts.c48a99ff2e89312c.js", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/styles.6869685dcbc594de.css", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/polyfills.f7e3195ab4ce45af.js", 404:""
  ⚠ handleUnknownRoute: "/mysubfolder/main.918200bb3d790082.js", 404:""

Scully fails to prerender ther app.

Can you share how to fix the part where I can prerender the app with Suclly having at the top?

Scully has no issues when I build the angular project with ng build command i.e without any sub directory, the issue comes only when I build the Angular project with ng build --base-href='/mysubfolder/' command.

Can you share which setting I am missng to let Scully pre render the Angular app with subdirectory serve?

How to overcome that handleUnknownRoute error?

Answer 1

When you run Scully, it needs to serve your application. When you use the base-href option of the CLI, it will update the index.html, but the destination is still ./dist/myApp Which gets copied into the Scully server and will fail. (as there is no subfolder).

The easy solution is to use the scully-base-href-rewrite plugin, instead of the Angular CLI option.

Also, you can do some renaming of your dist-folder, but that is confusing at least.