Угловой UI-Router работает с шаблоном, но не с компонентом

Question

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

Например, это работает:

var groceryListRoutes = function($stateProvider) { 
    var listOfGroceryLists = { 
     name: 'listOfGroceryLists', 
     url: '/lists', 
     template: '<grocery-list-component></grocery-list-component>', 
    }; 
    $stateProvider.state(listOfGroceryLists); 
}; 

Однако, когда я пытаюсь указать компонент, ничего не показывает, и никакой ошибки не выдается в консоли:

var groceryListRoutes = function($stateProvider) { 
    var listOfGroceryLists = { 
     name: 'listOfGroceryLists', 
     url: '/lists', 
     component: 'groceryListComponent', 
    }; 
    $stateProvider.state(listOfGroceryLists); 
}; 

Вот мой grocery-list.module.js, который регистрирует компонент и маршрутов:

import angular from 'angular'; 
import 'angular-resource'; 
import uiRouter from 'angular-ui-router'; 

import groceryListComponent from './grocery-list.component'; 
import groceryListAPIService from './grocery-list.service'; 
import groceryListRoutes from './grocery-list.routes'; 

import groceryListDetailComponent from './grocery-list-detail.component'; 

const GroceryListModule = angular.module('groceryList', [ 
    // Dependencies 
    'ngResource', 
    'ui.router', 
]) 
    .config(($resourceProvider) => { 
     $resourceProvider.defaults.stripTrailingSlashes = false; 
    }) 
    .factory('groceryListAPIService', groceryListAPIService) 
    .component('groceryListComponent', groceryListComponent) 
    .component('groceryListDetailComponent', groceryListDetailComponent) 
    .config(groceryListRoutes); 

export default GroceryListModule; 

и мой grocery-list.component.js:

import template from './grocery-list.template.html'; 

import groceryListController from './grocery-list.controller'; 

const groceryListComponent = { 
    template, 
    controller: groceryListController, 
    controllerAs: 'groceryListCtrl', 
} 

export default groceryListComponent; 

И мой packages.json:

{ 
    "name": "shopping-list", 
    "version": "1.0.0", 
    "description": "An app to keep track of your grocery shopping", 
    "repository": "https://github.com/thomascothran/shopping_list.git", 
    "scripts": { 
    "start": "gulp", 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "eslint": "eslint" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.17.0", 
    "babel-eslint": "^7.0.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.16.0", 
    "eslint": "^3.7.1", 
    "eslint-config-airbnb": "^12.0.0", 
    "eslint-plugin-import": "^1.16.0", 
    "eslint-plugin-jsx-a11y": "^2.2.2", 
    "eslint-plugin-react": "^6.3.0", 
    "gulp": "^3.9.1", 
    "raw-loader": "^0.5.1", 
    "webpack": "^1.13.2", 
    "webpack-stream": "^3.2.0" 
    }, 
    "dependencies": { 
    "angular": "^1.5.8", 
    "angular-resource": "^1.5.8", 
    "angular-ui-router": "^0.3.1", 
    "js-cookie": "^2.1.3", 
    "ramda": "^0.22.1" 
    } 
} 

Answer 1

Обратитесь к этому вопросу: Angular - UI.Router not loading component

Похоже, вы используете 0.3.x в соответствии с вашим package.json, который не будет Работа. Обновите до 1.0.0 и попробуйте пожалуйста.

атрибут компонент доступен из ui-router@1.0.0 (см here и в CHANGELOG.MD - она ​​была добавлена ​​в 1.0.0-aplpha), поэтому он не доступен 0.3.1