Sub view for $state not rendering in named ui-view

https://plnkr.co/edit/VV13ty8XaQ20tdqibmFy?p=preview

Expected

After login the dashboard state renders dashboard.html, and all components and ui-views should render: tickers, tags, social(named ui-view) and feed.

Results

After login the dashboard state renders dashboard.html however only the components tickers,tags and feed show up, but not the social (named-ui-view)

I feel that my problem lies somewhere around where I transition from the login state to the dashboard state. Once you hit the dashboard state, it serves up the default template which is the component element tag: <dash-module></dash-module>. This will then render the dash.component template: dashboard.html and controller. However I've lost access to the social view in the dashboard state object.

dashboard.html

<div class="jumbotron text-center">
    <h1>The Dashboard</h1>
</div>

<div class="row">
  <tickers-module></tickers-module>
  <tags-module></tags-module>

  // Expecting the social-module-template.html to show below:
  <div ui-view="social"></div> 

  <feed-module></feed-module>
</div>

The routerApp module with the dashboard component full code in Plnkr

// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var routerApp = angular.module('routerApp', ['ui.router', 'tickers', 'tags', 'feed']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/login');

    const login = {
      name: 'login',
      url: '/login',
      templateUrl: 'login.html',
      bindToController: true,
      controllerAs: 'l',
      controller: function($state) {
        this.login = function() {
          $state.go('dashboard', {});
        }
      }
    }

    const dashboard = {
      name: 'dashboard',
      url: '/dashboard',
      params: {
        ticker: {},
        tags: {}
      },
      template: '<dash-module></dash-module>',
      views: {
        '' : {
          templateUrl: 'dashboard.html',
        },
        'social' : {
          templateUrl: 'social-module-template.html', 
          controller: function($state) {
            console.log('Social init', $state.params);
          }
        }
      }
    }

    $stateProvider
      .state(login)
      .state(dashboard);
})
tags.component('dashModule', {
  templateUrl: 'dashboard.html',
  controller: function($scope, $state) {
    console.log('dashModule loaded!');
  }
})

This is the part that should render the social html content in the <div ui-view="social"></div>

views: {
  '' : {
    templateUrl: 'dashboard.html',
  },
  'social' : {
    templateUrl: 'social-module-template.html', 
    controller: function($state) {
      console.log('Social init', $state.params);
    }
  }
}

回答1:

I made changes to your plunker here You were missing @ here.

const dashboard = {
  name: 'dashboard',
  url: '/dashboard',
  params: {
    ticker: {},
    tags: {}
  },
  template: '<dash-module></dash-module>',
  views: {
    '' : {
      templateUrl: 'dashboard.html',
    },
    'social@dashboard' : {
      templateUrl: 'social-module-template.html', 
      controller: function($state) {
        console.log('Social init', $state.params);
      }
    }
  }
}

In order for these components to appear under the home state, we must define them using absolute naming. Specifically, we must use the @ syntax to tell AngularJS that these components of our application should be mapped to a specific state. This follows the viewName@stateName syntax and tells our application to utilize named views from an absolute, or specific state. You can read more about relative vs. absolute names here.

See this for more information.

回答2:

The problem you have is named view has to render in same state i.e Dashboard.

Change the following and it should work.