Angular 5: Getting 'SyntaxError: Unexpected token )' when doing router.navigate()

Question

I have an angular 5 web app by which i need to do routing on a separate in a separate component.

This is my project structure:

/app
/app/app.module.ts
/app/app-routing.module.ts
/app/app.component.html
/pages/help/help1
/pages/help/help2
/pages/home

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Help1Component } from '...';
import { HomeComponent } from '...';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    Help1Component
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '...';
import { Help1Component } from '...';

const routes: Routes = [
  {
    path: 'help1',
    component: Help1Component,
    outlet: 'home'
  },
  {
    path: '',
    component: HomeComponent
  }
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

app.component.html:

<router-outlet></router-outlet>

home.component.html:

<ul class="sub">
  <li><a href="javascript:void(0);" (click)="helpPages('help1')"></li>
  <other links here>
</ul>

<some other html>
<router-outlet name="home"></router-outlet>
<some other html>

home.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {

   constructor(
     private _router: Router) { }

   ngOnInit() {}

   helpPages(routeName:string) {
     this._router.navigate([{ outlets: { home: [ routeName ] }}])
   }
}

The home component has a named router-outlet (home) that is used to load content pages from my navigation menu. So whenever i click for example a help menu, it should load that on that router-outlet on the home.component, and not on the main one on app.component

Then on my home.component.ts, i have this code snippet:

  helpPages(routeName:string) {
    this._router.navigate([{ outlets: { home: [ routeName ] }}])
  }

Where routeName could be any route that has been mapped to home, in this case, the help pages.

  {
    path: 'help1',
    component: Help1Component,
    outlet: 'home'
  }

But when invoking the method, i instead get an error:

SyntaxError: Unexpected token )

by which i do not understand. I am sure i have my codes correct and compiles well with no issues. I have been bangin' my head on this for a few days already, checking every tutorial, forums, and stack overflowing for possible solution, but to no avail.

But when i put the <router-outlet name="home"> on app.component.html, just below the other router-outlet, the page loading works.

What i'm not getting is that why it does not work when its on a separate component other than app.component.html.

I even tried importing NgModule, Router, Routes, and RouterModule into my home.component, but still does not work.

Thanks advance for any help.

UPDATE: the issue of SyntaxError: Unexpected token ) was a chrome browser issue attaching # or :1 at the end of the supposed call. This has been tagged as bug in Chrome v65 and should be fixed in v66 as per google post.

i just tried in case it might work, but it still does not even without it — Jeff
– Jeff, Commented Apr 6, 2018 at 8:58

Akanksha Gaur · Accepted Answer · 2018-04-06 11:19:19Z

1

I tried to produce our error. I did not get it. I tried to make your routing work. Since, it is in default path. I could not get it done. If the change the path of home component to home, redirect default path to home route, it works. you can check the sample here

Changes I made to your app-routing.module.ts

const routes: Routes = [  
  {
    path: '',
    redirectTo: 'home', 
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'help1',
        component: Help1Component,
        outlet: 'home'
      },
    ]
  }
]

and to your home.component.ts

helpPages(routeName:string) {
     this._router.navigate([ '/home', { outlets: { home: [ routeName ] }}]);
   }

I will update you on the reason of child routing not working on default path.

answered Apr 6, 2018 at 11:19

Akanksha Gaur

2,6963 gold badges29 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yassine Ben Hamida · Accepted Answer · 2018-04-06 08:32:01Z

0

try changing your redirection method from

this._router.navigate([{ outlets: { home: [ routeName ] }}])

to

this.router.navigateByUrl('/(home:help1)');

and tell me if it works.

answered Apr 6, 2018 at 8:32

Yassine Ben Hamida

6307 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular 5: Getting 'SyntaxError: Unexpected token )' when doing router.navigate()

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related