Angular 6 Safari router related error

Question

The site works in Chrome and Firefox. In Safari, you can navigate to any router page once. The second time you click on a link the following error shows up: Error: Uncaught (in promise): SyntaxError: The string did not match the expected pattern and nothing is loaded in router-outlet. Also you can load any url directly and everything works fine. The problem is always after clicking on router links. It doesn't matter which url or what order your follow, router links only work once before crashing.

Here's the routing module. I'm pretty sure it won't provide any clues but oh well...

import { AuthGuard } from './auth.guard';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    path: 'registro',
    loadChildren: './register/register.module#RegisterModule'
  },
  {
    path: 'usuarios',
    loadChildren: './user-list/user-list.module#UserListModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'usuario',
    loadChildren: './user/user.module#UserModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'mi-perfil',
    loadChildren: './user-edit/user-edit.module#UserEditModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'actividad',
    loadChildren: './new-edit-event/new-edit-event.module#NewEditEventModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'actividades',
    loadChildren: './event-list/event-list.module#EventListModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'actividad',
    loadChildren: './event/event.module#EventModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'mensajes',
    loadChildren: './chat/chat.module#ChatModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'articulos',
    loadChildren: './article-list/article-list.module#ArticleListModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'articulo',
    loadChildren: './article/article.module#ArticleModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'legal',
    loadChildren: './legal/legal.module#LegalModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule',
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    redirectTo: ''
  }
];

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

score 1 · Accepted Answer · answered Aug 11 '18 at 19:15

I found the problem. It seems it is not related to the Router but to how Angular handles Meta class methods. If any method that looks for a meta tag like updateTag() or removeTag() is invoked while the tag doesn't exist, Safari crashes and throws that cryptic error. For some reason, Chrome, Firefox and Edge continue to work and don't even throw an error.

The bug has been reported at https://github.com/angular/angular/issues/25427

Angular 6 Safari router related error

1 Answers1