Highlighted

Vanity URLs on AEM SPA Editor - Angular application

enock_ma

04-05-2020

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:

[
{
"context": [
"/**.model.json",
"/content/**/**.jpeg",
"/content/**/**.jpg",
"/content/**/**.png",
"/content/**/**.PNG",
"/content/**/**/**.png",
"/content/**/**/**.PNG",
"/content/**/**/**.jpeg",
"/content/**/**/**.jpg",
"/content/**/**/**.pdf"
],
"target": "http://localhost:4503",
"auth": "username:password",
"logLevel": "debug"
}
]

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.

 

AEM 6.4.7 SPA Editor