We have huge problems with the Target implementation since we updated from AngularJS to Angular2. Currently we are using Angular 4.1.3 and we implemented Target with the at.js (v 1.0.0) over DTM as a tool.
In one of 5 cases it loads fine but during most of the cases at.js applies all changes from Target during the page load, Adobe Debugger shows the manipulation as successful, but after that the css file loads and overwrites the changes of Target again. Css file is included in the header of the pre-rendered html page.
We have a Single Page Application but in all the examples the integration was always with Angular JS. I cannot implement the extensions like ngRoute because the module does not exist anymore in Angular2.
We've also tried out to include at.js as page load rule on page top and bottom, with the same effect.
The behaviour is depending on the browser, while firefox works best it usually never works in IE.
Any ideas on how we can change the implementation to get it work?
Thanks for your reply I haven't seen this module before. This is definitely helpful in some cases I can think of right now. In the described case however I rely on the global-mbox because for our A/B tests the elements which are affected change more often than the deployment cycle is currently. So it wouldn't help me if I have to define the elements upfront which are affected. Please let me know if I misunderstood the documentation?
It would be great to have a (static) line of code which I can execute within the Angular app which tells the at.js script ok now is the right time to apply all changes so that the changes don't get overwritten by the loading behavior of Angular.
It also improved quite a lot with the newer versions of at.js, nevertheless this issue persists in IE.