Upgrading from 0.3 to 1.0.0-beta-3

[httpete]

Hi,

I am migrating a large app with a hundred or so routes to the new router. I found it dies with an error that is very hard to trace where it hurts:

"TypeError: Cannot create property 'dynamic' on number '1'"

The only way for me to find it was to comment out whole modules and then determine which one broke it.

and the need to force an empty template property also was hard to trace from the error thrown. Can't that default to an empty string? I have many template-less routes.

[christopherthielen]

Hi @httpete thanks for the feedback.

Did you ever find out what was causing your type error?

Can't that default to an empty string? I have many template-less routes.

I will consider this for the next release. If anything, I think the default would be to render an unnamed <ui-view></ui-view>

[httpete]

Hi @christopherthielen , I did it was an onEnter function I had on my route when I removed it, it went away.
The error it throws when it has an empty template should at least say which route name it is, it doesnt now it just says $default.foo has no template.

I also found that the stateEvents.js doesn't work out of the box, I had to remove the webpack wrapper. But even once on, it doesn't throw the $state***Events the same way, and my app was breaking. The events are not thrown the same way as 0.3.1 in my opinion.

[christopherthielen]

The events are not thrown the same way as 0.3.1 in my opinion.

I'd like details on the differences, and how it caused your app to break. We have a pretty extensive set of unit tests ported from legacy ui-router that work with the stateEvents.js

I appreciate your feedback

[httpete]

Thanks Chris,

This widget behaves differently. The "show" event (the first $on.event there ) is fired, and then immediately after the "hideMe" is called. That is the $stateChangeSuccess. I bet this is hard to see. But the widget works fine in 0.3.1, and is always hidden in 1.0 because the this.hideMe() is fired when the show() is called.

        $rootScope.$on(IframerComponent.NAME + '.show', (evt, src, modeCls) => {

            if (src) {
                el.setAttribute('src', src);
                el.style.display = '';
                body.style.overflowY = 'hidden';
                stripClasses();
                el.classList.add(modeCls);

                var sc = $rootScope.$on('$stateChangeSuccess', (evt) => {
                    this.hideMe(evt);
                    sc();
                });
                isShowing = true;
                window.scrollTo(0, 0);
            }

        });

        this.hideMe = (evt) => {
            el.style.display = 'none';
            body.style.overflowY = '';
            stripClasses();
            isShowing = false;
            // Now set to a blank state so I don't flash.
            el.setAttribute('src', 'um/index.html#blank:');
        };

        $rootScope.$on(IframerComponent.NAME + '.hide', this.hideMe);

[httpete]

This is how that event is fired. I go this route (badroute), the controller emits the "show" event, and then it is immediatlly hidden.

`       var iFramerCtrl = ['$scope',,  function ($scope, IFramerService) {
            $scope.$emit('iframer.show', IFramerService.getIframeSrc(), 'global');
        }];

    // Dashboard route.
    $stateProvider.state('badroute', <angular.ui.IState>{
        url: '/',
        data: {
            iFrameSrc: 'index.html#',
        },
        controller: iFramerCtrl
    });`

[christopherthielen]

@httpete thanks for the details. That's a bug in the polyfill. I'll fix that in beta.4 -- tracked as #3144

In the meantime, you can use the stateEvents.js polyfill I built and tested from here: http://plnkr.co/edit/Dtk3kBr1spkb6OISxXpg?p=preview

[christopherthielen]

Moved default template idea to #3178