Uncaught (in promise): SecurityError: Failed to execute 'pushState' on 'History'

These are my routes:

const routes:Routes =[
  {path:'', component:WelcomeComponent},
  {path:'profile', component: ProfileComponent},
  {path:'addcourse', component: AddcourseComponent},
  {path:'course', component: CourseComponent},
  {path:'editCourse', component: EditCourseComponent},
  {path:'addLectures', component: AddLectureComponent},
  {path:'login', component:LoginComponent},
  {path:'register', component:RegisterComponent},
  // { path: 'newform', canActivate:[AuthGuard], component:NewFomComponent},
  { path: '**', redirectTo:'', pathMatch:'full'}

my app starts with the welcome page, when I click on login it takes me to the courses page and upon clicking a course the app should take me to the course component but it redirects to welcome page and when I click on login it gives me this error:

ERROR Error: Uncaught (in promise): SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'http://%28login%29/' cannot be created in a document with origin 'http://localhost:4200' and URL 'http://localhost:4200/'.
Error: Failed to execute 'pushState' on 'History': A history state object with URL 'http://%28login%29/' cannot be created in a document with origin 'http://localhost:4200' and URL 'http://localhost:4200/'.

I have looked up similar issues and all of them suggest to check the base href, in my app it is set to / so no issues there. Can anybody please what am I doing wrong?