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?
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.