are these ui-sref states ie11 friendly

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>

score 0 · Accepted Answer · answered Oct 24 '17 at 00:38

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) } )

are these ui-sref states ie11 friendly

1 Answers1