How to use asp-fallback like option in Angular 6

I am developing an App that will be used in both offline and online servers. So I want to have an option that online servers should use necessary css/js files from CDNs and offline servers should use from local.

Sample asp-fallback-href option. I understood in below code that it will work as I expected.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
              asp-fallback-href="~/vendor/fortawesome/fontawesome-free/css/all.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
              crossorigin="anonymous">

I use Angular 6, How can I achieve this?

Solution

All the asp-fallback* properties do is add some extra JavaScript to dynamically load the fallback src/href if the test fails. In other words:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" />
<script>
    (function () {
        var testElement = document.createElement('span');
        testElement.className = 'sr-only';
        if (testElement.style.position !== 'absolute') {
            var head = document.getElementsByTagName('head')[0];
            var link = document.createElement('link');
            link.href = '/vendor/fortawesome/fontawesome-free/css/all.css';
            link.rel = 'stylesheet';
            head.appendChild(link);
        }
    })();
</script>

You can use data-* attributes to simulate the same inline definition of the fallback href and requisite tests, and just modify the code accordingly to use these instead of the hard-coded values, to generalize the script. You'd also likely be better served by simply employing a dynamic loading library, which often has the ability to run these sorts of conditional includes built-in (such as fallback.io)