Итак, я взял оригинальный шаблон угловой навигации:
<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>
и обновил Bootstrap с 3.3.7 до 4.1.3, например:
<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>
Часть Bootstrap выглядит нормально, потому что, если я перейду на другую простую страницу с кнопкой, кнопка появится в новом стиле.Но я получаю консольную ошибку, которая говорит:
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)
Я использовал онлайн-конвертер для перехода с Bootstrap 3 на 4 (http://upgrade -bootstrap.bootply.com / ), поэтому я предполагаю, что это как-то все испортило, но я не могу понять, что это такое.
Я надеюсь, что кто-то увидит очевидную ошибку, которую мне не хватает.Спасибо.