angular-router

I'm upgrading from Angular 4.0.0 to Angular 5.2.6 i'm facing some problem to get lazy module loading working. with angular 4.0.0 , it works fine , but now , with 5.2.6 , i getting such an error when clicking my redirecting button : core.js:1448 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function TypeError: undefined is not a function at Array.map (<anonymous>) at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34) at SystemJsNgModuleLoader.loadAndCompile (core.js:6558) at SystemJsNgModuleLoader.load (core.js

How to use angular 6 Route Auth Guards for all routes Root and Child Routes ? Kishore Kumar 1) [ Create guard, the file name would be like auth.guard.ts ] ng generate guard auth import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; import { AuthService } from './auth.service'; import {Router} from '@angular/router'; @Injectable() export class AuthGuard implements CanActivate { constructor(private auth: AuthService, private myRoute: Router){ } canActivate( next:

In Angular 1.x I can do the following to create a link which does basically nothing: <a href="">My Link</a> But the same tag navigates to the app base in Angular 2. What is the equivalent of that in Angular 2? Edit: It looks like a bug in the Angular 2 Router and now there is an open issue on github about that. I am looking for an out of the box solution or a confirmation that there won't be any. Emiel Koning If you have Angular 5 or above, just change <a href="" (click)="passTheSalt()">Click me</a> into <a [routerLink]="" (click)="passTheSalt()">Click me</a> A link will be displayed with a

I am trying to update (add, remove) queryParams from a component. In angularJS, it used to be possible thanks to : $location.search('f', 'filters[]'); // setter $location.search()['filters[]']; // getter I have an app with a list that the user can filter, order, etc and I would like to set in the queryParams of the url all the filters activated so he can copy/paste the url or share it with someone else. However, I don't want my page to be reloaded each time a filter is selected. Is this doable with the new router? Radosław Roszkowiak You can navigate to the current route with new query params,

I've been trying to write a canDeactivate guard to check a saving state from an observable stream and work accordingly. My service goes as this import { Injectable } from '@angular/core'; import { ReplaySubject } from 'rxjs/ReplaySubject'; import { Observable } from 'rxjs/Observable'; @Injectable() export class EditModelService { private savingModelDataSource = new ReplaySubject<boolean>(); savingModelData$ = this.savingModelDataSource.asObservable(); public setSavingModelData(state: boolean) { this.savingModelDataSource.next(state); } } My guard goes as import { Injectable } from '@angular

I am new to angular 4. What I'm trying to achieve is to set different layout headers and footers for different pages in my app. I have three different cases: Login, register page (no header, no footer) routes: ['login','register'] Marketing site page (this is the root path and it has a header and footer, mostly these sections come before login) routes : ['','about','contact'] App logged in pages (I have a different header and footer in this section for all the app pages but this header and footer is different from the marketing site header and footer) routes : ['dashboard','profile'] I run the

I have an Angular2 application with one router outlet that displays different components depending on which link is clicked in a side menu. The markup for the main component containing the <router-outlet> looks like this <div *ngIf="authenticated == false"> <app-login></app-login> </div> <div *ngIf="authenticated"> <div class="page home-page"> <header class="header"> <app-navbar></app-navbar> </header> <div class="page-content d-flex align-items-stretch"> <div class="sidebar-container"> <app-sidebar-menu></app-sidebar-menu> </div> <div class="content-inner"> <app-page-header></app-page-header>