76051

Angular Routing uncaught error

Question:

I have the following:

<a href="https://i.stack.imgur.com/vNMVo.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/vNMVo.png" data-original="https://i.stack.imgur.com/vNMVo.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

I am getting an error saying:

compiler.es5.js:1690 Uncaught Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. (" <div class="navbar-header"> <ul class="nav navbar-nav list-inline"> <li class="home"><a [ERROR ->][routerLink]="['/home']">Login</a></li> <li class="child"><a [routerLink]="['/child']">Child</a>"): ng:///HomeModule/HomeComponent.html@7:25 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("inline"> <li class="home"><a [routerLink]="['/home']">Login</a></li> <li class="child"><a [ERROR ->][routerLink]="['/child']">Child</a></li> <li class="parent"><a [routerLink]="['/parent']">Parent"): ng:///HomeModule/HomeComponent.html@8:26 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("</li> <li class="child"><a [routerLink]="['/child']">Child</a></li> <li class="parent"><a [ERROR ->][routerLink]="['/parent']">Parent</a></li> </ul> </div>

However I declared it in my app.modules.ts:

@NgModule({ declarations: [], imports: [ RouterModule.forRoot(appRoutes), BrowserModule, ChildModule, ParentModule, HomeModule ], providers: [], bootstrap: [HomeComponent] }) export class AppModule { }

In my HomeComponent.html I have the header:

<header id="header"> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <ul class="nav navbar-nav list-inline"> <li class="home"><a [routerLink]="['/home']">Login</a></li> <li class="child"><a [routerLink]="['/child']">Child</a></li> <li class="parent"><a [routerLink]="['/parent']">Parent</a></li> </ul> </div> </div> </nav> </header>

However it is saying it recognize the property.

I have uploaded the code to GitHub: [GitHub][2]

------------Update 1---------------

I updated CommonModule.ts

import { NgModule } from '@angular/core'; import {RouterModule} from '@angular/router'; @NgModule({ declarations: [], // you don't need anything here since this module has no templates for Angular to parse! imports: [RouterModule], exports: [ RouterModule ] }) export class CommonModule { }

I then imported it into app.module.ts

@NgModule({ declarations: [], imports: [ BrowserModule, ChildModule, ParentModule, HomeModule, CommonModule ], providers: [], bootstrap: [HomeComponent] }) export class AppModule { }

Errors:

[2]: <a href="https://github.com/drewjocham/Routing.gitERROR" rel="nofollow">https://github.com/drewjocham/Routing.gitERROR</a> in

ERROR in /Users/drew/Documents/OutputInput/Sample/node_modules/@angular/common/src/common_module.d.ts (11,15): Cannot find name 'RouterModule'. ERROR in /Users/drew/Documents/OutputInput/Sample/node_modules/@angular/common/src/common_module.d.ts (13,9): Cannot find name 'RouterModule'.

Answer1:

This is because HomeComponent is declared in a Module that doesnt import the RouterModule. RouterLink is a directive that belongs to it.

To solve this, you could add RouterModule into the imports array of the HomeModule.

Answer2:

To understand errors like this, it's good to know a bit about how Angular processes templates. The basic version is as follows:

<ol><li>

Angular reads all the components, directives and pipes that imported modules export -- for instance when you import BrowserModule into your AppModule, all the components and directives of CommonModule will be read because BrowserModule exports CommonModule

</li> <li>

Angular reads all the components, directives and pipes that are declared in the current module.

</li> </ol>

That lists makes up the context within which Angular operates when it scans your templates. This means that unless you declared a directive in your module or imported it from another module, when Angular comes across it in the module template, it won't recognize it and will give you an error such as:

<blockquote>

Can't bind to 'routerLink' since it isn't a known property of 'a'

</blockquote>

So when you see that, you immediately know that in the context of this module, the routerLink directive was neither declared nor imported.

The fix is simple: Export RouterModule from your CommonModule so that routing directives (such as routerLink) will be available to all other modules. Alternatively, you could just import RouterModule directly.

@NgModule({ declarations: [], // you don't need anything here since this module has no templates for Angular to parse! imports: [], exports: [ HttpModule, CommonModule, RouterModule ] }) export class CommonModule { }

Be careful not to use RouterModule.forRoot() since that is reserved for AppModule

Recommend

  • material-ui jss-rtl - after using jss-rtl my page is still LTR
  • Run multiple query animations in parallel
  • Share Component between 2 modules
  • Angular 6/7 by default uses Eager/Lazy loading? [closed]
  • How to change parent variable from children component?
  • How to remove hash from URL in Angular5?
  • Angular error: no provider for ActivatedRoute
  • Angular-cli + primeng require is not defined
  • Nodejs Amazon S3 File Upload
  • Cannot find type definition file for 'highcharts'
  • Upgrading to Angular Material 5
  • Angular 2 CLI App throwing 404 errors once deployed
  • ng-bootstrap modal is not displaying
  • Angular2 redirect to custom error page
  • Lazy loading not working in Angular 6
  • Importing angular component to be available in all modules
  • Execute particular component after click on md dialog button
  • Possible F# type inference limitation
  • How to Autowire repository interface from a different package using Spring Boot?
  • Angularjs - Pagination appear after search filter
  • smart-table Angular module unable to sort
  • The android java class cannot recognize the R file
  • How to assign value to angular pagination custom template?
  • Implement keyboard navigation in lists using AngularJS
  • AngularJS- How to pass data from one controller to another on ng-click()?
  • AngularJs ng-repeat filtering by a deeper tier of data
  • how to avoid the dependencies hell with unit test in angular 2+
  • show popover on input validation in angularjs
  • Perl function name clash
  • Wrap assemblies in .NET?
  • JSF NumberFormatException with f:setPropertyActionListener
  • How to add regEx in angular filter
  • Change attribute of custom directive
  • Angular page doesn't refresh after data is added or removed
  • Not able to display correct data in table -AngularJS
  • Running jasmine tests for a component with NgZone dependency
  • What Makes These Two Array Adds Different?
  • Function calls are not supported. Consider replacing the function or lambda with a reference to an e
  • Bypass multiple inheritance in Java
  • Meteor helpers not available in Angular template