are these ui-sref states ie11 friendly - angularjs

Question

When trying to navigate with IE11, the links do not work with a state such as url: '/main-category/:id' but the "parent" state url: '/:main-category/' works fine. These are not true nested or parent-child since they don't actually share any common views/html template, except for navigation.
I found this meta tag suggestion and this IE events suggestion, but neither seem to be providing a solution for why my navigation bar AND links from another state do not function.
Here is a live site without minify, to test compare IE11 & all other browsers.
So, are these routes correctly setup?
router.js
angular.module('app_litsco')
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', { //this state works
url: '/',
templateUrl: 'html/home.html',
controller: 'controller_home',
})
.state('product_streamline', { //this state DOES NOT work
url: '/streamline_metal_panels/:id',
templateUrl: 'html/template_product.html',
controller: 'controller_prods',
})
.state('streamline_panels', { //this state works
url: '/:cat',
templateUrl: 'html/template_productlist.html',
controller: 'controller_productlist',
})
$locationProvider.html5Mode(true);
}]);
index.html
example NavBar section
<li class="link">
<!-- Main Category link -->
<a data-activates="streamline-panel-dropdown" class="blue-text text-darken-4 product-link" ui-sref="streamline_panels({ cat: 'streamline_metal_panels' })">STREAMLINE METAL PANELS</a>
<div id="streamline-panel-dropdown" class="dropdown-content dropdown-full full">
<div class="container dropdown-container flex-row-around-center">
<div class="col sm12 m3 text-center dropdown-item">
<!-- Sub-Category links -->
<a ui-sref="product_streamline({ id: 'classic_cr' })" class="product-link">Classic CR</a>
</div>
<div class="col sm12 m3 text-center dropdown-item">
<a ui-sref="product_streamline({ id: 'omniwall_md' })" class="product-link">Omniwall MD</a>
</div>
<div class="col sm12 m3 text-center dropdown-item">
<a ui-sref="product_streamline({ id: 'omniwall_cl' })" class="product-link">Omniwall CL</a>
</div>
</div>
</div>
</li>

Answer 1

Your product_streamline state uses Array.find() in a resolve, which IE doesn't support.
.state('product_streamline', {
url: '/streamline_metal_panels/:id',
templateUrl: 'html/template_product.html',
controller: 'controller_prods',
resolve: {
product: ['factory_litsco', '$stateParams', function (factory_litsco, $stateParams) {
var productIdObj = factory_litsco.find(function (obj) {
if (obj.id === $stateParams.id) {
return obj;
}
});
return productIdObj;
}],
$title: ['product', function (product) {
return product.productName;
}]
}
})
To detect these sort of errors, add a handler for $stateChangeError such as:
angular.element(document.getElementsByTagName('body')[0]).scope().$on('$stateChangeError', function() { console.log("Error", arguments) } )