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,

Solution 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.

Solution 2:

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

Change the following and it should work.

social@dashboard

Check this Plunkr

Named Views UI router