When are routed components initialized?

I have the following route:

path: ':id', component: ViewBookPageComponent },

And when added it produces the error:

Error: Cannot read property 'id' of null

I'm not performing a null check in the component since the property will be available when the component is navigated to and in this case the auth guard is also keeping rerouting to login prior to any of the book routes being shown.

This is a stacblitz demo:

https://stackblitz.com/edit/angular-ngrx-slice-demo-fork-with-id-route?file=src%2Fapp%2Fbooks%2Findex.ts

If I comment out the route, the error no longer appears, so it seems Angular is instantiating the component prior to it being routed to.

edited Jan 2 at 6:04

asked Jan 1 at 23:35

Ole

9,23784986

Not quite sure what kind of routing are you expecting? When an end-user navigates to FindBookPageComponent, how can they go to ViewBookPageComponent?

– Kevin
Jan 2 at 0:05

Here's a full blown working example that I'm refactoring: stackblitz.com/edit/akita-books-store

– Ole
Jan 2 at 0:12

We first navigate to find, then search, then click on a search result to view the details. The detailed view would be /books/:id where the :id value would be used to look up the book.

– Ole
Jan 2 at 0:12

add a comment |

I have the following route:

path: ':id', component: ViewBookPageComponent },

And when added it produces the error:

Error: Cannot read property 'id' of null

This is a stacblitz demo:

https://stackblitz.com/edit/angular-ngrx-slice-demo-fork-with-id-route?file=src%2Fapp%2Fbooks%2Findex.ts

If I comment out the route, the error no longer appears, so it seems Angular is instantiating the component prior to it being routed to.

edited Jan 2 at 6:04

asked Jan 1 at 23:35

Ole

9,23784986

Not quite sure what kind of routing are you expecting? When an end-user navigates to FindBookPageComponent, how can they go to ViewBookPageComponent?

– Kevin
Jan 2 at 0:05

Here's a full blown working example that I'm refactoring: stackblitz.com/edit/akita-books-store

– Ole
Jan 2 at 0:12

We first navigate to find, then search, then click on a search result to view the details. The detailed view would be /books/:id where the :id value would be used to look up the book.

– Ole
Jan 2 at 0:12

add a comment |

I have the following route:

path: ':id', component: ViewBookPageComponent },

And when added it produces the error:

Error: Cannot read property 'id' of null

This is a stacblitz demo:

https://stackblitz.com/edit/angular-ngrx-slice-demo-fork-with-id-route?file=src%2Fapp%2Fbooks%2Findex.ts

If I comment out the route, the error no longer appears, so it seems Angular is instantiating the component prior to it being routed to.

edited Jan 2 at 6:04

asked Jan 1 at 23:35

Ole

9,23784986

I have the following route:

path: ':id', component: ViewBookPageComponent },

And when added it produces the error:

Error: Cannot read property 'id' of null

This is a stacblitz demo:

https://stackblitz.com/edit/angular-ngrx-slice-demo-fork-with-id-route?file=src%2Fapp%2Fbooks%2Findex.ts

If I comment out the route, the error no longer appears, so it seems Angular is instantiating the component prior to it being routed to.

javascript angular typescript

edited Jan 2 at 6:04

asked Jan 1 at 23:35

Ole

9,23784986

edited Jan 2 at 6:04

asked Jan 1 at 23:35

Ole

9,23784986

edited Jan 2 at 6:04

asked Jan 1 at 23:35

Ole

9,23784986

asked Jan 1 at 23:35

Ole

9,23784986

asked Jan 1 at 23:35

Ole

9,23784986

Not quite sure what kind of routing are you expecting? When an end-user navigates to FindBookPageComponent, how can they go to ViewBookPageComponent?

– Kevin
Jan 2 at 0:05

Here's a full blown working example that I'm refactoring: stackblitz.com/edit/akita-books-store

– Ole
Jan 2 at 0:12

We first navigate to find, then search, then click on a search result to view the details. The detailed view would be /books/:id where the :id value would be used to look up the book.

– Ole
Jan 2 at 0:12

add a comment |

Not quite sure what kind of routing are you expecting? When an end-user navigates to FindBookPageComponent, how can they go to ViewBookPageComponent?

– Kevin
Jan 2 at 0:05

Here's a full blown working example that I'm refactoring: stackblitz.com/edit/akita-books-store

– Ole
Jan 2 at 0:12

We first navigate to find, then search, then click on a search result to view the details. The detailed view would be /books/:id where the :id value would be used to look up the book.

– Ole
Jan 2 at 0:12

Not quite sure what kind of routing are you expecting? When an end-user navigates to FindBookPageComponent, how can they go to ViewBookPageComponent?

– Kevin
Jan 2 at 0:05

Here's a full blown working example that I'm refactoring: stackblitz.com/edit/akita-books-store

– Ole
Jan 2 at 0:12

We first navigate to find, then search, then click on a search result to view the details. The detailed view would be /books/:id where the :id value would be used to look up the book.

– Ole
Jan 2 at 0:12

add a comment |

2 Answers
2

active

oldest

votes

Is the following fix your problem?

  const routes: Routes = [

    {

       path: 'find',

       component: FindBookPageComponent,

    },

    children:[

      {

          path: 'result',

          component: SearchResultComponent,

       },

       children:[

         {

            path: 'book/:id',

            component: ViewBookPageComponent ,

         }

       ]

    ]



   ]

edited Jan 2 at 0:22

answered Jan 2 at 0:03

Kevin

170215

This is the correct answer, wrong implementation. You should put find/:id under children property of find route and then have it /:id instead of find/:id.

– Baruch
Jan 2 at 0:08

This is a full blown example with all the routes working. stackblitz.com/edit/akita-books-store

– Ole
Jan 2 at 0:10

I'm refactoring that example. The routes work and the :id is correct, as we wish to access a specific book at /books/:id and the routing used is relative to the books URL and its defined by the books module.

– Ole
Jan 2 at 0:11

Hi, @Ole. See my update. Basically, use children routing.

– Kevin
Jan 2 at 0:23

Hi @Kevin. Happy new year! If you study the stackblitz.com/edit/akita-books-store example, you will see that the routing does actually work. What I'm wondering is why it does not work in my specific case, since in we have not navigated to books/:id yet.

– Ole
Jan 2 at 0:24

|
show 1 more comment

The AuthGuard is not protecting the route. It needs to be declared within the Book module itself. See this question for more details.

answered Jan 2 at 17:59

Ole

9,23784986

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999776%2fwhen-are-routed-components-initialized%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Is the following fix your problem?

  const routes: Routes = [

    {

       path: 'find',

       component: FindBookPageComponent,

    },

    children:[

      {

          path: 'result',

          component: SearchResultComponent,

       },

       children:[

         {

            path: 'book/:id',

            component: ViewBookPageComponent ,

         }

       ]

    ]



   ]

edited Jan 2 at 0:22

answered Jan 2 at 0:03

Kevin

170215

This is the correct answer, wrong implementation. You should put find/:id under children property of find route and then have it /:id instead of find/:id.

– Baruch
Jan 2 at 0:08

This is a full blown example with all the routes working. stackblitz.com/edit/akita-books-store

– Ole
Jan 2 at 0:10

I'm refactoring that example. The routes work and the :id is correct, as we wish to access a specific book at /books/:id and the routing used is relative to the books URL and its defined by the books module.

– Ole
Jan 2 at 0:11

Hi, @Ole. See my update. Basically, use children routing.

– Kevin
Jan 2 at 0:23

Hi @Kevin. Happy new year! If you study the stackblitz.com/edit/akita-books-store example, you will see that the routing does actually work. What I'm wondering is why it does not work in my specific case, since in we have not navigated to books/:id yet.

– Ole
Jan 2 at 0:24

|
show 1 more comment

Is the following fix your problem?

  const routes: Routes = [

    {

       path: 'find',

       component: FindBookPageComponent,

    },

    children:[

      {

          path: 'result',

          component: SearchResultComponent,

       },

       children:[

         {

            path: 'book/:id',

            component: ViewBookPageComponent ,

         }

       ]

    ]



   ]

edited Jan 2 at 0:22

answered Jan 2 at 0:03

Kevin

170215

This is the correct answer, wrong implementation. You should put find/:id under children property of find route and then have it /:id instead of find/:id.

– Baruch
Jan 2 at 0:08

This is a full blown example with all the routes working. stackblitz.com/edit/akita-books-store

– Ole
Jan 2 at 0:10

I'm refactoring that example. The routes work and the :id is correct, as we wish to access a specific book at /books/:id and the routing used is relative to the books URL and its defined by the books module.

– Ole
Jan 2 at 0:11

Hi, @Ole. See my update. Basically, use children routing.

– Kevin
Jan 2 at 0:23

Hi @Kevin. Happy new year! If you study the stackblitz.com/edit/akita-books-store example, you will see that the routing does actually work. What I'm wondering is why it does not work in my specific case, since in we have not navigated to books/:id yet.

– Ole
Jan 2 at 0:24

|
show 1 more comment

Is the following fix your problem?

  const routes: Routes = [

    {

       path: 'find',

       component: FindBookPageComponent,

    },

    children:[

      {

          path: 'result',

          component: SearchResultComponent,

       },

       children:[

         {

            path: 'book/:id',

            component: ViewBookPageComponent ,

         }

       ]

    ]



   ]

edited Jan 2 at 0:22

answered Jan 2 at 0:03

Kevin

170215

Is the following fix your problem?

  const routes: Routes = [

    {

       path: 'find',

       component: FindBookPageComponent,

    },

    children:[

      {

          path: 'result',

          component: SearchResultComponent,

       },

       children:[

         {

            path: 'book/:id',

            component: ViewBookPageComponent ,

         }

       ]

    ]



   ]

edited Jan 2 at 0:22

answered Jan 2 at 0:03

Kevin

170215

edited Jan 2 at 0:22

answered Jan 2 at 0:03

Kevin

170215

answered Jan 2 at 0:03

Kevin

170215

answered Jan 2 at 0:03

Kevin

170215

This is the correct answer, wrong implementation. You should put find/:id under children property of find route and then have it /:id instead of find/:id.

– Baruch
Jan 2 at 0:08

This is a full blown example with all the routes working. stackblitz.com/edit/akita-books-store

– Ole
Jan 2 at 0:10

I'm refactoring that example. The routes work and the :id is correct, as we wish to access a specific book at /books/:id and the routing used is relative to the books URL and its defined by the books module.

– Ole
Jan 2 at 0:11

Hi, @Ole. See my update. Basically, use children routing.

– Kevin
Jan 2 at 0:23

Hi @Kevin. Happy new year! If you study the stackblitz.com/edit/akita-books-store example, you will see that the routing does actually work. What I'm wondering is why it does not work in my specific case, since in we have not navigated to books/:id yet.

– Ole
Jan 2 at 0:24

|
show 1 more comment

This is the correct answer, wrong implementation. You should put find/:id under children property of find route and then have it /:id instead of find/:id.

– Baruch
Jan 2 at 0:08

This is a full blown example with all the routes working. stackblitz.com/edit/akita-books-store

– Ole
Jan 2 at 0:10

I'm refactoring that example. The routes work and the :id is correct, as we wish to access a specific book at /books/:id and the routing used is relative to the books URL and its defined by the books module.

– Ole
Jan 2 at 0:11

Hi, @Ole. See my update. Basically, use children routing.

– Kevin
Jan 2 at 0:23

Hi @Kevin. Happy new year! If you study the stackblitz.com/edit/akita-books-store example, you will see that the routing does actually work. What I'm wondering is why it does not work in my specific case, since in we have not navigated to books/:id yet.

– Ole
Jan 2 at 0:24

This is the correct answer, wrong implementation. You should put find/:id under children property of find route and then have it /:id instead of find/:id.

– Baruch
Jan 2 at 0:08

This is a full blown example with all the routes working. stackblitz.com/edit/akita-books-store

– Ole
Jan 2 at 0:10

I'm refactoring that example. The routes work and the :id is correct, as we wish to access a specific book at /books/:id and the routing used is relative to the books URL and its defined by the books module.

– Ole
Jan 2 at 0:11

Hi, @Ole. See my update. Basically, use children routing.

– Kevin
Jan 2 at 0:23

Hi @Kevin. Happy new year! If you study the stackblitz.com/edit/akita-books-store example, you will see that the routing does actually work. What I'm wondering is why it does not work in my specific case, since in we have not navigated to books/:id yet.

– Ole
Jan 2 at 0:24

|
show 1 more comment

The AuthGuard is not protecting the route. It needs to be declared within the Book module itself. See this question for more details.

answered Jan 2 at 17:59

Ole

9,23784986

add a comment |

The AuthGuard is not protecting the route. It needs to be declared within the Book module itself. See this question for more details.

answered Jan 2 at 17:59

Ole

9,23784986

add a comment |

The AuthGuard is not protecting the route. It needs to be declared within the Book module itself. See this question for more details.

answered Jan 2 at 17:59

Ole

9,23784986

The AuthGuard is not protecting the route. It needs to be declared within the Book module itself. See this question for more details.

answered Jan 2 at 17:59

Ole

9,23784986

answered Jan 2 at 17:59

Ole

9,23784986

answered Jan 2 at 17:59

Ole

9,23784986

answered Jan 2 at 17:59

Ole

9,23784986

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu