Uncaught Error: Syntax error, unrecognized expression: /contact - ANGULAR 2 - Not able achieve smooth scroll effect while routing

Question

I don't understand this issue.

Could someone tell me the meaning of this error?

app.compo.html

<div class="header-w3layouts"> 
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">My_Design</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <h1><a class="navbar-brand" href="index.html">My Design</a></h1>
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right cl-effect-15">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden"><a class="page-scroll" href="#page-top"></a></li>
        <li><a class="page-scroll scroll" [routerLink]="['/']" >Home</a></li>
        <li><a class="page-scroll scroll" [routerLink]="['/contact']">Contact</a></li>
      </ul>
    </div>
  </nav>
</div>      
<main>
  <router-outlet ></router-outlet>
</main>

app.routing.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { home }      from './home/home.component';
import { contact }   from './contact/contact.component';
import {AppComponent } from './app.component'
import { ModuleWithProviders } from '@angular/core';

const routes: Routes = [
  { path: '', redirectTo:'/home' ,pathMatch: 'full'},    
  { path:'home', component:home },
  { path: 'contact', component: contact,  pathMatch: 'full' },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

scrolling-nav.js

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
  if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
  } else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
  }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
  $('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
  });
});

if i start debugger, its highlighting following line from scrolling-nav.js

scrollTop: $($anchor.attr('href')).offset().top

why it's happening and how to over come this?

Answer 1

Simply change this:

<li><a class="page-scroll scroll" [routerLink]="['/contact']">Contact</a></li>

Into this:

<li><a class="page-scroll scroll" [routerLink]="'/contact'">Contact</a></li>

Or maybe even simply this:

<li><a class="page-scroll scroll" routerLink="/contact">Contact</a></li>

And I'd bet even this would work:

<li><a class="page-scroll scroll" routerLink="contact">Contact</a></li>

Your routerLink directive takes string inputs as well, if you don't have complex parameters to pass around or calculate. When you use [routerLink]="" form, you need to provide an angular expression inside the html attribute value (inside the double quotes), hence 'contact' . If you only set the attribute name (without the binding, so just routerLink="" form), whatever is inside the quotes is taken as string.