Use of [routerLinkActive] generates 'error on data.split'

Question

Inside one of my lazy loaded modules, I'm using some simple routing like so:

<div id="nav">
    <div class="nav-content">
        <div class="nav-item" [routerLink]="'basic'" [routerLinkActive]="active-nav">
            <span class="glyphicon glyphicon-cog"></span>
            Basic Settings
        </div>
        <div class="nav-item" [routerLink]="'map'" [routerLinkActive]="active-nav">
            <span class="glyphicon glyphicon-map-marker"></span>
            Floor Plan
        </div>
    </div>
</div>

But upon running the server, I'm getting a lengthy error that starts with

Uncaught (in promise): TypeError: data.split is not a function TypeError: data.split is not a function at RouterLinkActive.set [as routerLinkActive] (eval ....

What's going on here? Is one of my dependencies creating this issue?

Answer 1

Unlike the attribute variant, the binding [routerLinkActive] takes an array. Try this:

[routerLinkActive]="['active-nav']"