Uncaught Error: Syntax error, unrecognized expression: #/ angularjs and jquery

Question

Following error shown up in my console whenever my page loads.

"Uncaught Error: Syntax error, unrecognized expression: #/about"

My code is as below:

                <li class="active">
                    <a href="/">Home</a>
                </li>
                <li class="">
                    <a href="#/about" title="About Us">About</a>
                </li>
                <li class="">
                    <a href="#/pricing">Pricing</a>
                </li>

It shows for all initial instance of . Initially, it shows for #/about as it is first, If I remove about us tab it will show up for pricing page link.

Its not bootstrap tab issue, This are simple navigation only

Routing Code in app.js:

$routeProvider.when('/', {
        templateUrl: 'partials/home.html'
    }).when('/account', {
        templateUrl: 'partials/account.html',
    }).when('/terms', {
        templateUrl: 'partials/terms.html'
    }).when('/about', {
        templateUrl: 'partials/about.html'
    }).otherwise({
        redirectTo: '/'
    });

I have debug its issue of bootstrap, bootstrap nav causing this issue: "nav navbar-nav" fixes for this is data-target="#" but wants proper work around for this

Answer 1

This is most probably a Bootstrap issue. Try using data-targetattribute on your links like this

<a href="#/about" data-target="#about" title="About Us">About</a>

Answer 2

Ok you gotta remove the slash, '/' with which your html becomes,

<a href="#about" title="About Us">About</a>

If you want to keep the slash, '/' you gotta use data-target attribute as,

<a href="#/about" title="About Us" data-target="#about">About</a>

More about it here

Answer 3

This issue happens also on angular 2 projects. I just add data-target="#" to the anchor link. It solved my problem.

 <a data-target="#" [routerLink]="['/link']">my link</a>.