AngularJS Component Not Rendering

Question

I'm using AngularJS 1.5.11.

I can't seem to get my component wired-up correctly. If I hard-code a template property, it works:

$stateProvider.state("dashboard.expense", {
  url: "/expense",
  template: `<div>Geddy Lee</div>`
})

^^ That indeed shows Geddy Lee on the page.

But as soon as I point it to a component, no rendering occurs:

$stateProvider.state("dashboard.expense", {
  url: "/expense",
  component: "expenseReportsComponent"
})

I'm keeping the component simple, just to see if I can get it to render:

module.component('expenseReportsComponent', {
  template: `<div>Geddy Lee</div>`
});

^^ Geddy Lee is not displayed.

There are no console errors. I've tried a variety of changes, but nothing seems to work. What am I missing?

Petr Averyanov · Accepted Answer · 2019-04-24 18:13:40Z

3

You are very likely to use old version of ui-router. Either migrate to newer one or use:

template: `<expense-reports-component></expense-reports-component>`

you wont have all features like uiOnParamsChanged in this case, but this of course will work.

answered Apr 24, 2019 at 18:13

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bob Horn Over a year ago

Thanks. I just tried using the template property like that and it didn't work for me. Looks like I just need to update ui-router.

MattJ · Accepted Answer · 2019-04-24 18:15:29Z

1

Double check to see what version of ui-router you are using. I believe the component property was added in 1.0.0.

https://github.com/angular-ui/ui-router/blob/master/CHANGELOG.md

answered Apr 24, 2019 at 18:15

MattJ

1364 bronze badges

Comments

Mark S. · Accepted Answer · 2019-04-24 18:00:32Z

0

Combine it all together and use both template and component in your state declaration:

$stateProvider.state("dashboard.expense", {
  url: "/expense",
  template: `<div>Geddy Lee</div>`,
  component: "expenseReportsComponent"
})

answered Apr 24, 2019 at 18:00

Mark S.

4,0274 gold badges25 silver badges25 bronze badges

1 Comment

Bob Horn Over a year ago

I don't think that helps me. This is just a test to see that I can get a component working. Once I do, I'm going to start using a more complex component. Plus, I believe the component property is supposed to take the place of the template and controller properties.

Collectives™ on Stack Overflow

AngularJS Component Not Rendering

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related