I am working on an AEM SPA Angular application which is running on AEM 6.4.7. Using the typical implementation where the Angular components are mapped to AEM components. To avoid not exposing the /content directory on the URL, I have resorted to using vanity URLs and this was my approach:
Changes made on AEM: - OSGi config for Apache Sling Resource Resolver Factory: Added the URL Mapping: /content/awesome/application/home/-/home
Angular: - The app router redirects to /home.html - All URLs on the application point to something like: /home/something/something-else.html and /home/another-thing/more-things.html
proxy.aem.conf.json: The configuration for this file looks like this:
I the build the application and deploy it onto my AEM environment running on http://localhost:4503/home.html and everything works as expected and all my other URLs under /home/* work as expected.
The problem: The problem is when I run the application on http:localhost:4200 using: npm start. - The first page which is http://localhost:4200/home.html is rendered correctly and the model.json of that page is also returned. - The other pages give exceptions, a pages such as http://localhost:4200/home/something/something-else.html gives the following error on the console: "ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'lastIndexOf' of undefined TypeError: Cannot read property 'lastIndexOf' of undefined at Function.value (cq-spa-page-model-manager.js:1) at e.value (cq-spa-page-model-manager.js:1) at e.value (cq-spa-page-model-manager.js:1) at cq-spa-page-model-manager.js:1 at ZoneDelegate.invoke (zone-evergreen.js:359) at Object.onInvoke (core.js:39699) at ZoneDelegate.invoke (zone-evergreen.js:358) at Zone.run (zone-evergreen.js:124) at zone-evergreen.js:855 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at resolvePromise (zone-evergreen.js:797) at resolvePromise (zone-evergreen.js:754) at zone-evergreen.js:858 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:39680) at ZoneDelegate.invokeTask (zone-evergreen.js:390) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:559)"
The model.json of these pages are also returned successfully.