search

Adobe-Marketing-Cloud / aem-guides-wknd-events

Step by Step guide to creating a Single Page Application to use with AEM
48 stars 34 forks source link

[Angular] Unexpected behaviour when directly accessing application #54

Open mzellho opened 5 years ago

mzellho commented 5 years ago

I noticed some strange behaviour when accessing the Angular App via ng serve.

Please note: all of this can easily be reproduced by checking out angular/chapter-8 and running ng serve --proxy-config ./proxy.mock.conf.json or ng test

When accessing the application at http://localhost:4200, the application cannot initialize correctly and throws two (!) "ERROR Error: "Uncaught (in promise): Object: {"response":{}}"".

Since the URL in the browser got updated to http://localhost:4200/content/wknd-events/angular/home.html, F5'ing will correctly load the application. Resetting the URL to http://localhost:4200 unsurprisingly leads to the same error.

I tried to dig into this error, but couldn't find the reason. I highly suspect it has something to do with the initialization of ModelManager. I tried many ways of delaying the initialization until the URL of the browser got updated, but couldn't get it working.

Since in production we anyways would call a "complete" URL, this would work there, but I am having a really hard time writing tests as the tests would access http://localhost:9876 and no "complete" URL.

I am mainly using the mock-json-approach which is working fine for development purposes. Any ideas whether this approach could also work in combination with ng test and a proxy config in karma.conf?

P.S.: Tests in this tutorial are failing as well - any chance we could get a chapter on testing?

godanny86 commented 5 years ago

hi @mzellho thank you for raising! We will take a closer look at this. I think the model manager changed slightly and we need to update the app routing logic for this. I'd encourage you to look at: https://github.com/adobe/aem-spa-project-archetype for the latest testing strategies and the We.Retail Journal app for another example of app routing: https://github.com/adobe/aem-sample-we-retail-journal/blob/master/angular-app/src/app/app-routing.module.ts