opened
liasrose
username_0
Hi everyone,

while implementing oclazyload to the component router tutorial [https://docs.angularjs.org/guide/component-router](url), 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 interessting, since it worked perfectly without implementing lazy loading. 
Is there any coincidence?

Best regards
username_0
Going back in the path doesn't work with oclazyload?
issue
created
djKooks
username_1
@username_0 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?
comment
created
liasrose
username_0
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
username_0
comment
created
djKooks
username_1
@username_0 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.
comment