Angular 8 - Cannot match any routes. URL Segment: 'javascript : void(0)'

Question

I have an angular 8 application in which I am using external dependency which generates paginated table in my application. I just need to pass json data to it and it will do the rest for me.

So the paginated table generates links for next and previous page. If I hover it it will show localhost:4200/javascript: void(0) . As per my knowledge, my app should ignore this hyperlink as underlying scripts must have onClick function for this.

But still I am getting below error.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'javascript%20:%20void%280%29'
Error: Cannot match any routes. URL Segment: 'javascript%20:%20void%280%29'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2459)
    at CatchSubscriber.selector (router.js:2440)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at ThrowIfEmptySubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at resolvePromise (zone.js:852)
    at resolvePromise (zone.js:809)
    at zone.js:913
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:26247)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1693)

Below is my app-routing.module.ts

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


const routes: Routes = [
  {
    path: HEALTH,
    pathMatch: FULL,
    loadChildren: './health/health.module#HealthModule'
  },
  {
    path: EMPTY_STRING,
    resolve: {
      LoggedInDetail: LoggedInDetailResolve
   },
    component: FullPageLayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'index',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: EMPTY_STRING,
    component: AppComponent,
    children: [
      {
        path: TEMPLATE_ROUTE,
        component: TemplateComponent
      }
    ]
  }

];

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

Please note I am using hash based URL's

imports: [RouterModule.forRoot(routes, { useHash: true })],

Answer 1

Please remove the pathMatch: FULL from your code.

Or you can use as pathMatch: 'prefix'

pathMatch:'full': In this case, when app is launched on localhost:4200 (or some server) the default page will be welcome screen, since the url will be https://localhost:4200/

If https://localhost:4200/surendra this will redirect to pageNotFound screen because of path:'**' wildcard

pathMatch:'prefix': If the routes have { path: '', redirectTo: 'initial', pathMatch: 'prefix' }, now this will never reach the wildcard route since every url would match path:'' defined.