During app testing with npm test
An error is encountered :
Failed: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
<nav>
<ul>
<li><a class="nav-link active" [ERROR ->][routerLink]="['/movies']" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" c"): ng:///DynamicTestModule/AppComponent.html@4:39
Can't bind to 'routerLinkActiveOptions' since it isn't a known property of 'a'. ("l>
<li><a class="nav-link active" [routerLink]="['/movies']" routerLinkActive="active-link" [ERROR ->][routerLinkActiveOptions]="{exact: true}" class="fa fa-home"><span>Home</span></a></li>
<li><"): ng:///DynamicTestModule/AppComponent.html@4:97
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("uterLinkActiveOptions]="{exact: true}" class="fa fa-home"><span>Home</span></a></li>
<li><a [ERROR ->][routerLink]="['/movies']" class="fa fa-film"><span>Best Movies 200's</span></a></li>
<li><a "): ng:///DynamicTestModule/AppComponent.html@5:15
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("routerLink]="['/movies']" class="fa fa-film"><span>Best Movies 200's</span></a></li>
<li><a [ERROR ->][routerLink]="['/theatre']" class="fa fa-television"><span>Movies in Theatre</span></a></li>
"): ng:///DynamicTestModule/AppComponent.html@6:15
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("ink]="['/theatre']" class="fa fa-television"><span>Movies in Theatre</span></a></li>
<li><a [ERROR ->][routerLink]="['/tvshows']" class="fa fa-video-camera"><span>Tv Shows</span></a></li>
<li><a "): ng:///DynamicTestModule/AppComponent.html@7:15
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<div class="container">
[ERROR ->]<router-outlet></router-outlet>
</div>"): ng:///DynamicTestModule/AppComponent.html@15:2
The provided HTML file is used in the app.
<section>
<div class="tabs tabs-style-fillup">
<nav>
<ul>
<li><a class="nav-link active" [routerLink]="['/movies']" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" class="fa fa-home"><span>Home</span></a></li>
<li><a [routerLink]="['/movies']" class="fa fa-film"><span>Best Movies 200's</span></a></li>
<li><a [routerLink]="['/theatre']" class="fa fa-television"><span>Movies in Theatre</span></a></li>
<li><a [routerLink]="['/tvshows']" class="fa fa-video-camera"><span>Tv Shows</span></a></li>
<li><a href="#section-fillup-5" class="fa fa-gear"><span>Settings</span></a></li>
</ul>
</nav>
</div><!-- /tabs -->
</section>
<div class="container">
<router-outlet></router-outlet>
</div>
The main app module file is as follows:
[Angular code snippet]
The custom routing module file:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
[Angular code snippet]
Question:
What could be the issue with the provided codes?