CODEWITHSUNDEEP
angularjs
Bob Horn
Bob Horn

Reputation: 34297

AngularJS Component Not Rendering

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?

Upvotes: 2

Views: 1788

Answers (3)

MattJ
MattJ

Reputation: 136

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

Upvotes: 1

Petr Averyanov
Petr Averyanov

Reputation: 9476

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.

Upvotes: 3

Mark S.
Mark S.

Reputation: 4019

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"
})

Upvotes: 0

Related Questions