https://stackoverflow.com/questions/51094841/angular-external-js-library-calling-document-ready
Step 1
Check if the external library is available on npm. If so you may be able to import the desired function rather than altering a vendored file.
For example, it may provide an API such that:
YourTsComponent.ts
const CallMe = require('library').CallMe // or import { CallMe } from 'library' // on route change CallMe()
If something like that is available, great, otherwise...
Step 2
Confirm your theory with a global (attach CallMe
to window temporarily). If your theory is correct, you should be able to get the desired behavior by calling this global variable on route change.
Tester.js
(function($) { "use strict"; $(document).ready(function() { CallMe(); }); function CallMe() { console.log('HEY I GOT CALLED'); } // TODO - remove (test only) window._CallMe = CallMe })(jQuery);
YourTsComponent.ts
// on route change
window._CallMe()
If that doesn't work, you must reevaluate your theory.
but if it does ...
Step 3
Convert the vendored library to a module that can be consumed by your app. Your mileage may vary based on what (if any) module system you are using. For example, if you are using require.js:
Tester.js
(function(factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof exports === 'object') { // CommonJS factory(require('jquery')); } else { // Browser globals factory(jQuery); } }(function($) { "use strict"; function CallMe() { console.log('HEY I GOT CALLED'); } $(document).ready(function() { CallMe(); }); return CallMe }));
YourTsComponent.ts
const CallMe = require('/path/to/tester.js') // on route change CallMe()
If you're not keen on re-writing a vendored library
You may consider overriding .ready
's default behavior so that it may be retriggered. There Are a few answers here if you want to go this route, but be warned, overriding default jQuery behavior is probably much more error prone than editing a single vendored file.