You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When I go to the view with the this.card.mount() and go away from the view, then return to that view again I get the following error:
core.es5.js:1020 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at SafeSubscriber._next (paymentcomponent.component.ts:154)
at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrSetError (Subscriber.js:247)
at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:187)
at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:83)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at FilterSubscriber.webpackJsonp.../../../../rxjs/operator/filter.js.FilterSubscriber._next (filter.js:87)
at FilterSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at BehaviorSubject.webpackJsonp.../../../../rxjs/BehaviorSubject.js.BehaviorSubject._subscribe (BehaviorSubject.js:28)
Line 154 is this line from your example: this.card.mount(this.cardRef.nativeElement);
The nativeElement is a property for the cardRef using the angular ElementRef and When reading about it, they say:
USE WITH CAUTION
Use this API as the last resort when direct access to DOM is needed. Use templating and data-binding provided by Angular instead. Alternatively you take a look at Renderer which provides API that can safely be used even when direct access to native elements is not supported.
Relying on direct DOM access creates tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker.
Should you be using something else, or a better way of doing this?
When looking at that reference document that I linked above (and here) it shows a security issue, and being a payment I feel this should be top priority to find a better way than using ElementRef.. Here is the note from Angular.IO
Security Risk
Permitting direct access to the DOM can make your application more vulnerable to XSS attacks.
The text was updated successfully, but these errors were encountered:
Hello,
When I go to the view with the this.card.mount() and go away from the view, then return to that view again I get the following error:
Line 154 is this line from your example:
this.card.mount(this.cardRef.nativeElement);
The nativeElement is a property for the cardRef using the angular ElementRef and When reading about it, they say:
Should you be using something else, or a better way of doing this?
When looking at that reference document that I linked above (and here) it shows a security issue, and being a payment I feel this should be top priority to find a better way than using ElementRef.. Here is the note from Angular.IO
Security Risk
Permitting direct access to the DOM can make your application more vulnerable to XSS attacks.
The text was updated successfully, but these errors were encountered: