Angular - hyperlink blocked by content-security-policy

Question

I have an angular application, where the routes are defined in the left navigation bar as follows:

<li routerLink="/dashboard/dashboard-landing" id="home" routerLinkActive="active">
        <a href="javascript:void(0);"><em class="cc-nav-icon fas fa-home"></em><span>Home</span></a>
</li>

Without the javascript:void(0), the page will make a full load when executing a route, resulting in the angular application to initialize.

Then I have also set the CSP for the application with script-src 'self';

Now when I navigate between pages, I get the console error about the CSP validation, because there's a Javascript code inline that tries to execute. I tried the following alternative, but still the CSP violation is there.

<a href="#" onClick="return false;">

I know this would work if I add unsafe-inline but that sort of beats the point of adding CSP. Is there a way to get around this?