named ui-view='main' is not displaying anything in angular 4.x

Viewed 61

I am running UI Router with angular 4.x. Below code is not rendering anything and I did not get any error message too. But when I changed to $default as a view name, then I am getting the page.Please suggest me.

<app-root>
<ui-view name='main'></ui-view>
</app-root>

Below is the angular State Definition,

export const appState = {
name: 'app',
views : { 
  main : { 
  component: AppComponent 
  }
}    
};
1 Answers

When Angular application bootstrap's, it wipes out the inner content of app-root(root) component. What ever you put inside root component will appear until Angular application bootstrap. Generally this place has been used to add Splash screen, loader to show initial loading.

To see your ui-view to replace via ui-router configuration, you should add ui-view inside app-root component HTML.

@Component({
  selector: 'app-root',
  template: `<ui-view name='main'></ui-view>`
})
export AppRootComponent {


}
Related