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:

<

Answer 1

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 2

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 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>. 

Answer 4

This may be a very rare situation, but I've got same error because of some legacy code using Colorbox and location.hash.

jQuery(function() {jQuery('.content-row .csc-default a').tooltip({placement:'top'});
jQuery('a.gallery').colorbox({
    maxWidth:'95%',
    maxHeight:'95%',
    slideshow:true,
    current:' {current} / {total}',
    opacity:'0.80',
    transition:'none',
    speed:'550',
    slideshowSpeed:'5500',
    overlayClose:true,
    fixed:false,
    escKey:true,
    arrowKey:true,
    loop:true,
    title: function() { return $(this).data('original-title')},
    close:'<span class="glyphicon glyphicon-remove"></span>',
    previous:'<span class="glyphicon glyphicon-chevron-left"></span>',
    next:'<span class="glyphicon glyphicon-chevron-right"></span>',
    slideshowStart:'<span class="glyphicon glyphicon-play"></span>',
    slideshowStop:'<span class="glyphicon glyphicon-pause"></span>',
    rel: function() { return $(this).data('rel')}
});
if (location.hash) $(location.hash).collapse('show'); //when this line is commented, Angular Route works properly
});

Strange thing is that error was happening only when loading page with link to view like localhost/index.html#/main or simply reloading page with any view selected.