Target implementation with Angular2 does not work

[KRAZ]

Hi,

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!

Konstantin

[arturc85303583 · Accepted solution]

KRAZ​, we have an Angular 2/4/5 specific module that you can use as an inspiration. The Angular module can be found here: target-atjs-extensions/angular2/module at master · Adobe-Marketing-Cloud/target-atjs-extensions · Gi.... You can open GitHub issues if you have specific questions related to Angular module.

Also you should be aware that Angular module will work only with Form Based Composer.

[Amelia_Waliany]

Hi Konstantin, thanks for your question! Please let us know if this information was helpful, or if you have any follow up questions - we're here to help!

Warmly,

Amelia

[KRAZ]

Hi arturc85303583​,

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.

Thanks,

Konstantin