AngularJS компонент не рендеринг

Question

Я использую AngularJS 1.5.11.

Не получается правильно подключить компонент. Если я жестко закодирую свойство шаблона, оно работает:

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

^^ Это действительно показывает Geddy Lee на странице.

Но как только я указываю на компонент, рендеринг не происходит:

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

Я оставляю компонент простым, чтобы посмотреть, смогу ли я заставить его визуализироваться:

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

^^ Geddy Lee не отображается.

Нет ошибок консоли. Я пробовал множество изменений, но, похоже, ничего не работает. Чего мне не хватает?

Answer 1

Вы, скорее всего, будете использовать старую версию ui-router.Либо перейдите на новый, либо используйте:

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

, в этом случае у вас не будет всех функций, таких как uiOnParamsChanged, но это, конечно, будет работать.

Answer 2

Дважды проверьте, какую версию ui-router вы используете. Я считаю, что свойство компонента было добавлено в 1.0.0.

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

Answer 3

Объедините все это вместе и используйте шаблон и компонент в объявлении состояния:

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