So I took the original Angular navigation template:
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' [attr.aria-expanded]='isExpanded' (click)='toggle()'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' [routerLink]='["/"]'>JobWeb</a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse' [ngClass]='{ "in": isExpanded }'>
<ul class='nav navbar-nav'>
<li [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
<a [routerLink]='["/"]' (click)='collapse()'>
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
<li [routerLinkActive]='["link-active"]'>
<a [routerLink]='["/counter"]' (click)='collapse()'>
<span class='glyphicon glyphicon-education'></span> Counter
</a>
</li>
<li [routerLinkActive]='["link-active"]'>
<a [routerLink]='["/fetch-data"]' (click)='collapse()'>
<span class='glyphicon glyphicon-th-list'></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
and I upgraded the Bootstrap from 3.3.7 to 4.1.3, like this:
<div class="main-nav">
<div class="navbar navbar-dark bg-dark navbar-expand-md">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse"
[attr.aria-expanded]="isExpanded" (click)="toggle()">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" [routerlink]="['/']">JobWeb</a>
<div class="clearfix"></div>
<div class="navbar-collapse collapse" [ngclass]="{ 'in': isExpanded }">
<ul class="nav navbar-nav">
<li [routerlinkactive]="['link-active']" [routerlinkactiveoptions]="{ exact: true }"
class="nav-item">
<a [routerlink]="['/']" (click)="collapse()" class="nav-link">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
<li [routerlinkactive]="['link-active']" class="nav-item">
<a [routerlink]="['/counter']" (click)="collapse()" class="nav-link">
<span class="glyphicon glyphicon-education"></span> Counter
</a>
</li>
<li [routerlinkactive]="['link-active']" class="nav-item">
<a [routerlink]="['/fetch-data']" (click)="collapse()" class="nav-link">
<span class="glyphicon glyphicon-th-list"></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
</div>
The Bootstrap part seems okay because if I go to another simple page with a button, the button appears in the new style. But I end up getting a console error that says:
Uncaught Error: Template parse errors:
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" [ERROR ->][routerlink]="['/']">JobWeb</a>
<div class="clearfix"></div>
<div class="navbar-collapse co"): ng:///AppModule/NavMenuComponent.html@6:28
Can't bind to 'ngclass' since it isn't a known property of 'div'. ("nk]="['/']">JobWeb</a>
<div class="clearfix"></div>
<div class="navbar-collapse collapse" [ERROR ->][ngclass]="{ 'in': isExpanded }">
<ul class="nav navbar-nav">
<li [routerlinkactive]="): ng:///AppModule/NavMenuComponent.html@8:42
Can't bind to 'routerlinkactive' since it isn't a known property of 'li'. ("ollapse collapse" [ngclass]="{ 'in': isExpanded }">
<ul class="nav navbar-nav">
<li [ERROR ->][routerlinkactive]="['link-active']" [routerlinkactiveoptions]="{ exact: true }"
class=""): ng:///AppModule/NavMenuComponent.html@10:12
Can't bind to 'routerlinkactiveoptions' since it isn't a known property of 'li'. ("isExpanded }">
<ul class="nav navbar-nav">
<li [routerlinkactive]="['link-active']" [ERROR ->][routerlinkactiveoptions]="{ exact: true }"
class="nav-item">
<a [routerlink]"): ng:///AppModule/NavMenuComponent.html@10:49
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("-active']" [routerlinkactiveoptions]="{ exact: true }"
class="nav-item">
<a [ERROR ->][routerlink]="['/']" (click)="collapse()" class="nav-link">
<span class="glyphicon glyph"): ng:///AppModule/NavMenuComponent.html@12:13
Can't bind to 'routerlinkactive' since it isn't a known property of 'li'. ("
</a>
</li>
<li [ERROR ->][routerlinkactive]="['link-active']" class="nav-item">
<a [routerlink]="['/counter']" (cli"): ng:///AppModule/NavMenuComponent.html@16:12
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("
</li>
<li [routerlinkactive]="['link-active']" class="nav-item">
<a [ERROR ->][routerlink]="['/counter']" (click)="collapse()" class="nav-link">
<span class="glyphico"): ng:///AppModule/NavMenuComponent.html@17:13
Can't bind to 'routerlinkactive' since it isn't a known property of 'li'. ("
</a>
</li>
<li [ERROR ->][routerlinkactive]="['link-active']" class="nav-item">
<a [routerlink]="['/fetch-data']" ("): ng:///AppModule/NavMenuComponent.html@21:12
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("
</li>
<li [routerlinkactive]="['link-active']" class="nav-item">
<a [ERROR ->][routerlink]="['/fetch-data']" (click)="collapse()" class="nav-link">
<span class="glyph"): ng:///AppModule/NavMenuComponent.html@22:13
at syntaxError (compiler.js:485)
at TemplateParser.parse (compiler.js:24668)
at JitCompiler._parseTemplate (compiler.js:34621)
at JitCompiler._compileTemplate (compiler.js:34596)
at eval (compiler.js:34497)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:34497)
at eval (compiler.js:34367)
at Object.then (compiler.js:474)
at JitCompiler._compileModuleAndComponents (compiler.js:34366)
I used an online converter to go from Bootstrap 3 to 4 (http://upgrade-bootstrap.bootply.com/), so I assume that somehow messed things up, but for the life of me I can't seem to figure out what it is.
I'm hoping someone will see an obvious mistake that I'm missing. Thanks.
Yes, it was due to the conversion you had from the upgrade bootstrap link you provided. As per the original angular template you took, all were in a proper case in regards with routerLink but then after you convert, all of them were in a lowercase form routerlink
Replace all your [routerlink] to [routerLink] with a capital letter L
These are the proper ones:
[routerLink]
[routerLinkActive]
[routerLinkActiveOptions]
Yours were:
[routerlink]
[routerlinkactive]
[routerlinkactiveoptions]
Angular is quite case sensitive, so becareful :)