Going back in the path doesn't work with oclazyload?

[liasrose]

Hi everyone,

while implementing oclazyload to the component router tutorial https://docs.angularjs.org/guide/component-router, I came across the following problem:

this.gotoHeroes = function () { var heroId = this.hero && this.hero.id; this.$router.navigate(['HeroList', {id: heroId}]);};

(this is a function for a Button that simply goes back in the path)

produces the Error: angular.js:13236 TypeError: Cannot read property 'navigate' of undefined

Debugging showed that the router is the same router as in the app.js / hero.component, but it seems like it can't fall back to the path it knew before. What is interesting, since it worked perfectly without implementing lazy loading. Is there any coherence?

Best regards liasrose

[kination]

@liasrose it is hard to know with this information because there are no comment about how lazy load has been implemented on your code. Could you show us more detail?

[liasrose]

I implemented lazy loading like this in the app.js:

`(function () { var app = angular.module('app', ['oc.lazyLoad', 'ngComponentRouter']);

app.config(function ($locationProvider) {
    $locationProvider.html5Mode(true);
});

app.value('$routerRootComponent', 'app');


app.component('app', {
    template: [
        '<a ng-link="[\'Home\']">Home</a> |',
        '<a ng-link="[\'Heroes\']">Heroes</a> |',
        '<a ng-link="[\'CrisisCenter\']">Crisis Center</a>',
        '<hr>',
        '<ng-outlet></ng-outlet>'
    ].join('\n'),
    controller: ['$router', '$ocLazyLoad', function ($router, $ocLazyLoad) {
        $router.config([
            {path: '/', name: 'Home', component: 'home', usaAsDefault: true},

            //Heroes Route
            {
                path: '/heroes/...',
                name: 'Heroes',
                loader: function () {
                    // lazy load Heroes
                    return $ocLazyLoad.load('/heroes/heroes.js')
                        .then(function () {
                            return 'heroes';
                        });
                }
            },`

Lazy loading functions perfect, also loading to the "subroute", the heroList and heroDetail (both components of heroes, in this example everything is in one file)

$routeConfig: [ {path: '/', name: 'HeroList', component: 'heroList', useAsDefault: true}, {path: '/:id', name: 'HeroDetail', component: 'heroDetail'} ]

the only thing that isn't working, is going back from HeroDetail to HeroList via the router (see code in my first comment above). I can also go back just using window.history.back(), so there is no urgent help needed, I was just curious why its not working anymore after implementing lazyloading.

Best regards liasrose

[kination]

@liasrose I am implementing this based on ui-router. It also does not load again when it moves to parent path because it is already loaded. Is your router correctly setup 'HeroList' and 'HeroDetail' as parent-children relation? I will try on ngComponentRouter too to see this goes well.