How to disable unused ng-viewports from index.html in $router.config / anywhere ?

[bl4de]

Hi,

I've got some issue with ng-viewport and corresponding components defined in $router.config.

Here's my HTML:

...

<header id="header" ng-viewport="header"></header>
<nav id="nav" ng-viewport="navigation"></nav>
<section id="main" ng-viewport="main"></section>
<footer id="footer" ng-viewport="footer"></footer>
...

And here's $router.config:

$router.config([
        {
            path: "/",
            redirectTo: "/home"
        },
        {
            path: "/home",
            component: {
                header: "header",
                navigation: "navigation",
                main: "home",
                footer: "footer"
            },
            as: "home"
        },
        {
            path: "/splash",
            component: {
                main: "splash"
            },
            as: "splash"
        }
    ]);

The problem is, that when application reaches /splash route, I don't want to header, footer and navigation to be rendered. Of course, in situation like above, I get an error that "Cannot read property 'path' of undefined" and this is correct, because I omit those components in /splash route components' definition.

But this is also the problem - because I can't conditionally 'disable' unused ng-viewports. I was trying to play with some ng-if based on $router.lastNavigationAttempt or something, but I feel this is not the right way (I am sure it's not):

<header id="header" ng-viewport="header" ng-if="currentRoute !== '/splash' "></header>

(cuurentRoute is $router.lastNavigationAttempt property assigned to controller's property currenRoute, but it's not the case, of course).

I don't like this, it looks awful and requires a lot of additional assigns in controllers and on each controller I need to manualy check current route name to be able to conditionaly disable ng-viewports.

Do you have any idea how to resolve such kind of issue?

Thanks a lot.

[nikaspran]

It's a bug, and one that is easily fixable. However, most work right now is in the Angular 2 branch, so it's difficult to tell when this will work right.

[khalla]

Hi, i'm facing the same issue, my workaround is to define one "void" component, one empty controller with the following template:

div style='display:none;'

and then use it for those paths in which the correspondet viewport is not to be rendered

[jakob-e]

This is a major need-to-be-fixed

[richardsengers]

I'm faced with the exact same problem in angular 1.5.

Is there some kind of milestone planned for this?

[ArniDzhan]

@richardsengers check following project as it has up to date router and some examples of how to use it.

https://github.com/petebacondarwin/ng1-component-router-demo

[richardsengers]

Thanks @ArniDzhan. That's what I was looking for.