Routerlink is not working, but I can go to the view if I enter path in url - angular6

Question

In my main route, I have many modules, some lazyloading, others are preloading strategy, also I have routes for simple components. Some routes have AuthGuard.
When I click in an element with a Routerlink, it goes to Authguard but it stops there, the view is not loaded, and the url doesn't change.
If I enter the route in the url works and the page loads correctly.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, LOCALE_ID, CUSTOM_ELEMENTS_SCHEMA, Injectable, Injector, Inject, InjectionToken, ErrorHandler } from '#angular/core';
import { registerLocaleData, CommonModule } from '#angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import localeEsArs from '#angular/common/locales/es-AR';
import { ToasterModule, ToasterService } from 'angular2-toaster';
registerLocaleData(localeEsArs);
import { environment } from '../environments/environment';
import { routing } from './app.routing';
//Components and Services
import { AppComponent } from './app.component';
import { CallbackComponent } from './callback.component';
import { DisableControlDirective } from './directives/disable.directive';
import { AuthGuard } from './auth.guard';
import { EventEmitterService } from './services/event.emitter.service';
import { GenericModal } from './modals/genericmodal/modal.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
//services
import { AuthService } from './services/auth.service';
import { UserService } from './services/user.service';
import { BookingService } from './services/booking.service';
//Material Angular
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatInputModule, MatFormFieldModule, MatExpansionModule, MatDividerModule, MatTableModule, MatButtonModule,
MatMenuModule, MatSelectModule, MatSidenavModule, MatIconModule, MatToolbarModule, MatCheckboxModule,
MatTabsModule, MatPaginatorModule, MatButtonToggleModule, MatDialogModule, MatAutocompleteModule, MatNativeDateModule,
MatProgressSpinnerModule, MatTableDataSource, MatListModule, MatSliderModule, MatProgressBarModule, MatSlideToggleModule,
MatStepperModule, MatRadioModule, MatCardModule, MatBadgeModule
} from '#angular/material';
import { UserMetadataAdapter } from './core/adapter/userMetadataAdapter';
import { PlaceAdapter } from './core/adapter/placeAdapter';
import { CalendarAdapter } from './core/adapter/calendarAdapter';
import { PlaceGoogleAdapter } from './core/adapter/placeGoogleAdapter';
import { PredictionAdapter } from './core/adapter/predictionAdapter';
import { FingerPrintsAdapter } from './core/adapter/fingerPrintsAdapter';
import { GoogleAnalyticsService } from './services/googleAnalytics.Service';
import { SimpleAlgorithms } from './core/algorithms/simpleAlgorithms';
import { About } from './about/about.component';
import { PageNotFoundComponent } from './error/page-not-found/page-not-found.component';
import { DragToSelectModule } from 'ngx-drag-to-select';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { ReviewAdapter } from './core/adapter/reviewAdapter';
import { UserAdapter } from './core/adapter/userAdapter';
import { CookieService } from './services/cookieService';
import { ConfirmationDialog } from './entities/shared/dialogs/confirmation-dialog/confirmation-dialog';
import { BlogComponent } from './blog/blog.component';
import { BlogPostComponent } from './blog-post/blog-post.component';
import { CurrencyAdapter } from './core/adapter/currencyAdapter';
import { BellNotifyComponent } from './bell-notify/bell-notify.component';
import { NotificationAdapter } from './core/adapter/notificationAdapter';
import { OnScrollLoadComponent } from './shared/onscroll-load/onscroll-load.component';
import { SafePipe } from './pipes/safe.pipe';
import { MapLoaderModule } from './loaders/map/map-loader.module';
import { CroppingLoaderModule, GlobalVariables } from './loaders/cropping/cropping-loader.module';
import { UserActivityLogService } from './services/activitylog/user-activity-log.service';
import { UserActivityLogAdapter } from './core/adapter/activity-log/userActivityLogAdapter';
import { DialogTermsAndCondOverview } from './new-place-module/new-place/new-place.component';
import { BusinessInfoService } from './services/businessInfo.service';
import { PostAdapter } from './core/adapter/postAdapter';
import { EmitterService } from './services/emitter.service';
import { DateTimeService } from './services/datetime/date-time.service';
import { HomeModule } from './home-module/home.module';
import { AppCustomPreloader } from './app-custom-preloading';
import { HttpErrorInterceptor } from './http-error-interceptor';
// Rollbar Init----------------------------------------------------------
import Rollbar from 'rollbar';
import { NotificationService } from './services/notification/notification.service';
import { RouterModule } from '#angular/router';
import { Help } from './help/help.component';
const rollbarConfig = {
accessToken: environment.rollbarLog.accessToken,
captureUncaught: true,
captureUnhandledRejections: true,
environment: environment.rollbarLog.envName
};
export const RollbarService = new InjectionToken<Rollbar>('rollbar');
#Injectable()
export class RollbarErrorHandler implements ErrorHandler {
constructor(#Inject(RollbarService) private rollbar: Rollbar) { }
handleError(err: any): void {
if (environment.production)
this.rollbar.error(err.originalError || err);
}
}
export function rollbarFactory() {
return new Rollbar(rollbarConfig);
}
//Rollbar End-------------------------------------------------------------------------------
#NgModule({
exports: [
MatInputModule,
MatFormFieldModule,
MatExpansionModule,
MatDividerModule,
MatTableModule,
MatButtonModule,
MatMenuModule,
MatSelectModule,
MatSidenavModule,
MatIconModule,
MatToolbarModule,
MatToolbarModule,
MatCheckboxModule,
MatButtonToggleModule,
MatTabsModule,
MatPaginatorModule,
MatDialogModule,
MatAutocompleteModule,
MatNativeDateModule,
MatProgressSpinnerModule,
MatListModule,
MatSliderModule,
MatProgressBarModule,
MatSlideToggleModule,
MatStepperModule,
MatRadioModule,
MatCardModule,
MatBadgeModule
]
})
export class MaterialAngularModules { }
#NgModule({
declarations: [
AppComponent,
DisableControlDirective,
CallbackComponent,
GenericModal,
PageNotFoundComponent,
About,
Help,
ConfirmationDialog,
BlogComponent,
BlogPostComponent,
BellNotifyComponent,
OnScrollLoadComponent,
DialogTermsAndCondOverview
],
entryComponents: [GenericModal, ConfirmationDialog, DialogTermsAndCondOverview],
imports: [
BrowserModule,
BrowserAnimationsModule,
MaterialAngularModules,
HttpClientModule,
CommonModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
MatCheckboxModule,
routing,
CroppingLoaderModule,
DragToSelectModule.forRoot(),
InfiniteScrollModule,
ToasterModule.forRoot(),
MapLoaderModule,
NgbModule,
HomeModule
],
exports: [],
providers: [{ provide: LOCALE_ID, useValue: 'es-AR' }, AuthService, AuthGuard, EventEmitterService, EmitterService, GoogleAnalyticsService,
UserMetadataAdapter, PlaceAdapter, CalendarAdapter, PlaceGoogleAdapter, PredictionAdapter, FingerPrintsAdapter, SimpleAlgorithms, ReviewAdapter,
UserAdapter, UserService, UserActivityLogService, CookieService, NotificationService, BusinessInfoService, CurrencyAdapter, NotificationAdapter,
UserActivityLogAdapter, PostAdapter, AppCustomPreloader, DateTimeService,
{
provide: HTTP_INTERCEPTORS,
useClass: HttpErrorInterceptor,
multi: true
},
{ provide: ErrorHandler, useClass: RollbarErrorHandler },
{ provide: RollbarService, useFactory: rollbarFactory }
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent]
})
export class AppModule { }
app.route.ts
import { AppComponent } from './app.component';
import { Routes, RouterModule, PreloadAllModules } from '#angular/router';
import { ModuleWithProviders } from '#angular/core';
import { AuthGuard } from './auth.guard';
import { CallbackComponent } from './callback.component';
import { About } from './about/about.component';
import { PageNotFoundComponent } from './error/page-not-found/page-not-found.component';
import { BlogComponent } from './blog/blog.component';
import { BlogPostComponent } from './blog-post/blog-post.component';
import { HomeComponent } from './home-module/home/home.component';
import { AppCustomPreloader } from './app-custom-preloading';
import { Help } from './help/help.component';
export const routesApp: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{
path: 'home',
component: HomeComponent
},
//{
// path: 'main',
// component: AppComponent
//},
{
path: 'callback',
component: CallbackComponent
},
{
path: 'place/:id',
loadChildren: './place-module/place.module#PlaceModule',
data: { preload: false }
},
{
path: 'login',
loadChildren: './authentication-module/authentication.module#AuthenticationModule',
data: { preload: true }
},
{
path: 'place-account',
loadChildren: './place-account-module/place-account.module#PlaceAccountModule'
},
{
path: 'reports',
loadChildren: './report-module/report.module#ReportModule'
},
{
path: 'new-place',
loadChildren: './new-place-module/new-place.module#NewPlaceModule',
data: { preload: true }
},
{
path: 'mybooking',
loadChildren: './place-booking-module/place-booking.module#PlaceBookingModule'
},
{
path: 'user-booking',
loadChildren: './user-booking-module/user-booking.module#UserBookingModule',
data: { preload: true }
},
{
path: 'my-account',
loadChildren: './user-account-module/user-account.module#UserAccountModule'
},
{
path: 'blog',
component: BlogComponent
},
{
path: 'blog-post/:id',
component: BlogPostComponent
},
{
path: 'place-creditandnotify',
loadChildren: './place-credit-and-notification-module/place-credit-and-notification.module#PlaceCreditAndNotificationModule'
},
{
path: 'about',
component: About
},
{
path: 'help',
component: Help
},
{
component: PageNotFoundComponent,
path: "404",
},
{
path: "**",
redirectTo: '404'
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routesApp, {
preloadingStrategy: AppCustomPreloader
});
home.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { homerouting } from './home.routing';
import {
MatFormFieldModule, MatTabsModule, MatInputModule, MatIconModule, MatAutocompleteModule, MatSelectModule,
MatCheckboxModule, MatButtonToggleModule, MatSliderModule, MatSlideToggleModule
} from '#angular/material';
import { MapLoaderModule } from '../loaders/map/map-loader.module';
import { HomeComponent } from './home/home.component';
import { PlaceListComponent } from './home/place-list/place-list.component';
import { PlaceBoxComponent } from './home/place-box/place-box.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { RouterModule } from '#angular/router';
#NgModule({
exports: [
MatFormFieldModule, MatTabsModule, MatInputModule, MatIconModule, MatAutocompleteModule, MatSelectModule,
MatCheckboxModule, MatButtonToggleModule, MatSlideToggleModule, MatSliderModule
]
})
export class MaterialAngularModules { }
#NgModule({
entryComponents: [],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MaterialAngularModules,
homerouting,
MapLoaderModule,
NgbModule
],
declarations: [
HomeComponent,
PlaceListComponent,
PlaceBoxComponent
],
exports: [
HomeComponent
]
})
export class HomeModule { }
app.component.html
<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">-->
<!-- -->
<div class="router-container noScroll" >
<mat-sidenav-container class="example-sidenav-container">
<mat-sidenav #snav>
<!-- <p id="nameAuth" *ngIf="authService.isLoggedIn()">{{authService.getName()}}</p>
<div *ngIf="authService.isLoggedIn()" class="nameAuth">{{authService.getName()}}</div>
-->
<p class="menu-boton"><button (click)="snav.close()" routerLink="/home" mat-button [ngClass]="(document.location.pathname=='/home')?'button-left-panel': 'button-left-panel-noactive'">Home</button></p>
<p class="menu-boton"><button (click)="snav.close()" routerLink="/about" mat-button [ngClass]="(document.location.pathname=='/about')?'button-left-panel': 'button-left-panel-noactive'">Nosotros</button></p>
<p class="menu-boton"><button (click)="snav.close()" routerLink="/blog" mat-button [ngClass]="(document.location.pathname=='/blog')?'button-left-panel': 'button-left-panel-noactive'">Blog</button></p>
<p class="menu-boton"><button (click)="snav.close()" routerLink="/ayuda" mat-button [ngClass]="(document.location.pathname=='/ayuda')?'button-left-panel': 'button-left-panel-noactive'">Ayuda</button></p>
<div *ngIf="authService.isLoggedIn() && hasPlace">
<mat-divider></mat-divider>
<p class="menu-boton">Mi Negocio</p>
<p class="menu-boton"><button (click)="snav.close()" routerLink="/place-account" mat-button [ngClass]="(document.location.pathname=='/place-account')?'button-left-panel': 'button-left-panel-noactive'">Mi Lugar</button></p>
<p class="menu-boton"><button (click)="snav.close()" routerLink="/mybooking" mat-button [ngClass]="(document.location.pathname=='/mybooking')?'button-left-panel': 'button-left-panel-noactive'">Mi Calendario</button></p>
<p class="menu-boton"><button (click)="snav.close()" routerLink="/place-creditandnotify" mat-button [ngClass]="(document.location.pathname=='/place-creditandnotify')?'button-left-panel': 'button-left-panel-noactive'">Creditos</button></p>
<p class="menu-boton"><button (click)="snav.close()" routerLink="/reports" mat-button [ngClass]="(document.location.pathname=='/reports')?'button-left-panel': 'button-left-panel-noactive'">Reportes</button></p>
</div>
<div>
<p class="menu-boton"><button (click)="snav.close()" *ngIf="!authService.isLoggedIn()" routerLink="/login" mat-button [ngClass]="(document.location.pathname=='/login')?'button-left-panel': 'button-left-panel-noactive'">Iniciar sesion</button></p>
</div>
<div *ngIf="authService.isLoggedIn()">
<mat-divider></mat-divider>
<a style="margin-top:30px;" class="header-menu">
<div class="user-picture-url" style="cursor: pointer;">
<img style="width:35px;height:35px;" [src]="userProfileImage != null ? userProfileImage : ''" alt="">
{{name}}
<div class="header-menu" (click)="modal.show(); snav.close()" (mouseclick)="modal.show()">
<mat-icon [matBadge]="unreadMessages" matBadgeColor="warn">notifications</mat-icon>
</div>
</div>
</a>
<p class="menu-boton"><button (click)="snav.close()" routerLink="/my-account" mat-button [ngClass]="(document.location.pathname=='/my-account')?'button-left-panel': 'button-left-panel-noactive'">Mi Cuenta</button></p>
<p class="menu-boton"><button (click)="snav.close()" routerLink="/user-booking" [ngClass]="(document.location.pathname=='/user-booking')?'button-left-panel': 'button-left-panel-noactive'" mat-button>Mis reservas</button></p>
<p class="menu-boton"><button (click)="authService.logout()" mat-button>Log Out</button></p>
</div>
<div *ngIf="authService.isLoggedIn() && !hasPlace">
<mat-divider></mat-divider>
<p class="menu-boton"><button (click)="snav.close()" style="margin-top:25px; padding-left:20px;padding-right:20px;" routerLink="/new-place" mat-button [ngClass]="(document.location.pathname=='/new-place')?'button-left-panel': 'button-left-panel-noactive'">Agrega tu espacio</button></p>
</div>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary" class="example-toolbar">
<img routerLink="/home" style="outline: none; border: 0; cursor: pointer;" [src]="fullImagePath" class="img-logo">
<ul class="menu-upi">
<li><a class="header-menu" routerLink="/home">Home</a></li>
<li><a class="header-menu" routerLink="/about">Nosotros</a></li>
<li><a class="header-menu" [routerLink]="['/blog']" routerLinkActive="active">Blog</a></li>
<li><a class="header-menu" routerLink="/help">Ayuda</a></li>
</ul>
<!--
<form class="search-form">
<mat-form-field class="search-width">
<input matInput placeholder="Find a place" [formControl]="searchFormControl">
<mat-error *ngIf="searchFormControl.hasError('email') && !searchFormControl.hasError('required')">
Please enter a valid email address
</mat-error>
</mat-form-field>
</form>
-->
<!--<a *ngIf="!authService.isLoggedIn()" (click)="authService.login()">Log In</a>-->
<div class="header-widget">
<!--<a (click)="login()" class="header-menu popup-with-zoom-anim">google</a>
<a (click)="authService.signup('venturinosaporta#gmail.com', 'Ventuu3040')" class="header-menu popup-with-zoom-anim">Registrarse</a>-->
<!--<a *ngIf="!authService.isLoggedIn()" (click)="authService.login()" class="header-menu popup-with-zoom-anim">Iniciar sesion</a>-->
<p class="menu-usuario">
<img *ngIf="!userHasLoaded && !error" [src]="loadingImagePath" style="width:15%; float:right" />
</p>
<ul class="menu-usuario" *ngIf="userHasLoaded && !error">
<li *ngIf="authService.isLoggedIn() && hasPlace">
<a class="header-menu" style="cursor: pointer;" [matMenuTriggerFor]="menuempresa">Mi negocio</a>
<mat-menu #menuempresa="matMenu" [overlapTrigger]="false">
<p class="menu-boton"><button routerLink="/place-account" mat-button [ngClass]="{'button-left-panel': router.url=='/place-account'}" >Mi Lugar</button></p>
<p class="menu-boton"><button [routerLink]="['/mybooking']" mat-button>Mi Calendario</button></p>
<p class="menu-boton"><button routerLink="/place-creditandnotify" mat-button>Creditos</button></p>
<p class="menu-boton"><button routerLink="/reports" mat-button>Reportes</button></p>
</mat-menu>
</li>
<li *ngIf="authService.isLoggedIn()">
<a style="margin-top:30px;" class="header-menu" [matMenuTriggerFor]="menuuser">
<div class="user-picture-url" style="cursor: pointer;">
<img style="width:35px;height:35px;" [src]="userProfileImage != null ? userProfileImage : ''" alt="">
{{name}}
</div>
</a>
<mat-menu #menuuser="matMenu" [overlapTrigger]="false">
<p class="menu-boton"><button routerLink="/my-account" *ngIf="authService.isLoggedIn()" mat-button>Mi Cuenta</button></p>
<p class="menu-boton"><button routerLink="/user-booking" *ngIf="authService.isLoggedIn()" mat-button>Mis Reservas</button></p>
<p class="menu-boton"><button *ngIf="authService.isLoggedIn()" mat-button (click)="authService.logout()">Log Out</button></p>
</mat-menu>
</li>
<li *ngIf="authService.isLoggedIn()">
<div class="header-menu" style="cursor: pointer;" (click)="modal.show()" (mouseclick)="modal.show()">
<mat-icon [matBadge]="unreadMessages" matBadgeColor="warn">notifications</mat-icon>
<!-- Include text description of the icon's meaning for screen-readers -->
</div>
</li>
<li>
<a class="header-menu" *ngIf="!authService.isLoggedIn()" routerLink="/login">Iniciar sesion</a>
</li>
<li>
<label class="header-menu popup-with-zoom-anim" *ngIf="authService.isLoggedIn() && mobileQuery.matches">{{authService.getName()}}</label>
<a *ngIf="authService.isLoggedIn() && !hasPlace" style="margin-top:25px; padding-left:20px;padding-right:20px;" routerLink="/new-place" class="button border header-menu">Agrega tu espacio </a>
</li>
</ul>
<div *ngIf="error" style="color: black; text-align: right; margin-top: 15px">
<button (click)="window.location.reload()">
<span class="material-icons">
loop
</span>
Refrescar
</button>
</div>
</div>
<button class="menu-mobile" mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
</mat-toolbar>
<div [hidden]="!loadingModule" style="position:fixed; margin-top:25%; margin-left: 50%;">
<h2>Loading...</h2>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<div [hidden]="loadingModule" >
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
<toaster-container [toasterconfig]="config"></toaster-container>
<app-bell-notify #modal style="cursor: pointer;" (numberOfNotificationsEmiter)="getNumberOfNotificationsUnread($event)">
<div class="app-modal-header">
Notificaciones
</div>
<div class="app-modal-body">
Whatever content you like, form fields, anything
</div>
<div class="app-modal-footer">
<button type="button" class="simple-button" (click)="modal.hide()">Close</button>
</div>
</app-bell-notify>
MapLoaderModule
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { BrowserModule } from "#angular/platform-browser";
import { MapComponent } from "src/app/map/map.component";
import { AgmCoreModule, GoogleMapsAPIWrapper } from '#agm/core';
import { AgmSnazzyInfoWindowModule } from '#agm/snazzy-info-window';
import { AgmJsMarkerClustererModule } from '#agm/js-marker-clusterer';
import { RouterModule } from '#angular/router';
#NgModule({
imports: [
CommonModule,
AgmCoreModule.forRoot({ apiKey: 'AIzaSyB23x4UGHNZ-YRDCM1rI-AcdQ6lTyQcdyo' }),
AgmJsMarkerClustererModule,
AgmSnazzyInfoWindowModule,
RouterModule
],
exports: [MapComponent],
declarations: [MapComponent],
providers: [GoogleMapsAPIWrapper]
})
export class MapLoaderModule {}

Answer 1

Remove the / on routerLink
routerLink='home' same for the rest

Answer 2

Was missing the import RouterModule in MapLoaderModule
const mapRoutes: Routes = [
];
export const maprouting: ModuleWithProviders = RouterModule.forChild(mapRoutes);
I don't need to route in this module, so I leave empty