ERROR TypeError: resolve is not a function at SafeSubscriber._next (vendor.js:139806)-Angular 7: Routing in Side Nav not working

Question

I am getting this error in my browser console and I have routing links in my side nav (angular material) that are not even navigating to the router links. I am positive I have everything set up correctly.

ERROR: ERROR TypeError: t.resolve is not a function at SafeSubscriber._next (router.js:4123) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber.notifyNext (switchMap.js:72) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)

-----Football.HTML-----

<div class="container">
<mat-toolbar color="primary" class="nav-toolbar">
    <button style="margin-bottom:17px" mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
    <h1 class="nav-app-name">Fantasy Football</h1>
</mat-toolbar>
<mat-sidenav-container>
    <mat-sidenav role="navigation" #sidenav>
        <mat-nav-list>
            <a mat-list-item routerLinkActive="active" routerLink='/create-league'>Create League</a>
        </mat-nav-list>
        <app-sidenav-list (sidenavClose)="sidenav.close()"></app-sidenav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

-----Football.TS is empty-----

-----app-routing.module.ts-----

const appRoutes: Routes  = [{ path: '', redirectTo: '/home', pathMatch: 'full' }, 
{ path: 'create-league', component: CreateLeagueComponent}
];

@NgModule({
exports: [ RouterModule ],
declarations: [],
imports: [ RouterModule.forRoot(appRoutes), CommonModule],
})
export class AppRoutingModule { }

------app.module.ts-----

const modules = [ HttpClientModule, HttpModule, ReactiveFormsModule, MatToolbarModule, MatSidenavModule, MatNativeDateModule,
MatListModule, FormsModule, BrowserAnimationsModule, AppRoutingModule];

@NgModule({
declarations: [
AppComponent,
FootballComponent
],
imports: [
modules,
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' })
],
exports: [
modules,
BrowserModule
],
bootstrap: [ AppComponent ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);

BTW, you shouldn't use the CUSTOM_ELEMENTS_SCHEMA schema, unless you're actually using a custom element of some sort. Instead, resolve the issue that caused you to get the error of a certain element not working in your template. — Edric

Ammar Ameerdeen Ammar Ameerdeen · Accepted Answer · 2019-01-08T01:39:01

routerLink and routerLinkActive are angular attributes. So, you may rewrite the problem line as, for code clarity.

<a mat-list-item routerLinkActive="active" [routerLink]='['/create-league']'>Create League</a>

[routerLink] may cause this trouble when invoked from a modal. Looking at your code, I'm not quiet sure if this is the case, anyhow below code should work in any scenario.

<a mat-list-item (click)="goTo('/create-league')" >Create League</a>

ts code..

import {Router} from '@angular/router';

constructor(private router: Router) {}

goTo(url: string) {
    this.router.navigateByUrl(url);
    return false;
}

ERROR TypeError: resolve is not a function at SafeSubscriber._next (vendor.js:139806)-Angular 7: Routing in Side Nav not working

I am getting this error in my browser console and I have routing links in my side nav (angular material) that are not even navigating to the router links. I am positive I have everything set up correctly.

2 Answers