无法使用 UI-Router $StateProvider 显示视图

Question

我正在使用 Angular 1.6.3 组件创建一个 angular 应用程序，并使用 UI-路由器创建导航。但是我无法在使用 UI-Router 时显示屏幕。我在控制台中没有收到任何错误，因此无法确定发生了什么。谁能帮帮我。

代码可在以下位置获得 https://github.com/vipinnair/angular-1.6.3-component-ui-router

(function () {
    'use strict'

    var main = angular.module("main", ["security", "registration", "shared", "ui.router"]).config(function ($stateProvider) {
        $stateProvider.state('login', {
            url: '/login',
            template: '<h1>test</h1>'
        })
    })

    function mainController($location, restService, $rootScope) {
        var self = this;
        self.$onInit = function () {
            var dns = $location.host();
            if ($location.host().indexOf('tenant')) {
                $rootScope.tenant = "tenant";
            }
            else {
                $rootScope.tenant = "tenant2";
            }

            // TODO: Remove this hardcoding.
            $rootScope.tenant = "tenant";
            $rootScope.language = "en-CA";
            var url = "/" + $rootScope.tenant + "/base/set/" + $rootScope.language
            restService.get(url, "").then(function (response) {
                if (response.success === false) {
                    console.debug("Unable to set the tenant and language -", message.message)
                }
            });
        }
    }

    main.component("mainComponent", {
        templateUrl: "main/main.component.html",
        controllerAs: "model",
        controller: ["$location", "restService", "$rootScope", mainController]
    });

    return main;
})();


(function () {
    'use strict'

    var registration = angular.module("registration", []);

    function registrationController() {
        var model = this;
        model.login = function () {
        };
    }

    registration.component("registrationComponent", {
        templateUrl: "registration/registration.component.html",
        controllerAs: "model",
        controller: registrationController
    });

    return registration;
})();

(function () {
    'use strict'

    var security = angular.module("security", []);

    // ----------------------  Private methods ................................. //
    // fetch security cms content.
    function fetchPageContent(contentService) {
        // TODO: tenant/En-CA should be dynamic. Move urls to config.
        var url = "tenant" + "/page/security/" + "en-CA";
        contentService.fetchPageContent(url).then(function () {
            model.securityPageContent = response;

        });
    }

    // Login call back.
    function loginCallback(response) {
        if (response.success) {
            authServices.SetCredentials($scope.emailAddress, $scope.password);
            $location.path("/Home");
        }
    }


    // ---------------------------- Public Methods ................................ //

    function securityController($rootScope, contentService, authServices) {
        var model = this;

        model.$onInit = function () {

            // Set CMS pages.
            fetchPageContent(contentService)
        }

        model.login = function () {
            authServices.ClearCredentials();
            debugger;
            // spinner.
            authServices.login($rootScope.tenant, userData.emailAddress, userData.password, loginCallback);
        };
    }

    security.component("securityComponent", {
        templateUrl: "security/security.component.html",
        controllerAs: "model",
        controller: ["$rootScope", "contentService", "authServices", securityController]
    });

    return security
})();

(function () {
    'use strict'

    var app = angular.module('fxApp', ['main']);

    app.config(['$qProvider', function ($qProvider) {
        $qProvider.errorOnUnhandledRejections(false);
    }]);

    return app;
})();

 <main-component></main-component>

    <!-- MAIN CONTENT AND INJECTED VIEWS -->

<div id="main" ui-view>
</div>

Answer 1

看起来这个问题已经解决了。将 Ui-Router 更新为 1.0.0-beta 后，它开始工作了。