angular-router

Angular 7 routerLink directive warning 'Navigation triggered outside Angular zone'

由 [亡魂溺海] 提交于 2019-12-09 07:58:59
问题 I am struggling with Angular framework to get my application run smoothly, but I can't resolve an issue with routing. I have a top level AppComponent and app-routing.module.ts which manage the navigation via my custom SlideMenuComponent . My simplified html template of AppComponent : <app-slide-menu [buttons]="menuButtons"></app-slide-menu> <router-outlet></router-outlet> My SlideMenuComponent has the following html as its core: <nav><div *ngFor="let button of buttons"> <a routerLink="{

Angular Router when navigating programatically, old component stays in the dom

由 瘦欲@ 提交于 2019-12-08 20:57:52
问题 Angular version: 4 After signing in from the LoginComponent (located in public/signin route, I want to navigate to TestComponent in the path public/test . I'm doing so as following: this._router.navigate(['public/test']) Then, it redirects correctly but the problem is that it doesn't remove LoginComponent from the DOM (although ngOnDestroy does get called). It's worth mentioning that navigating to TestComonent using <a routerLink='/public/test'>Test</a> works as expected. What am I doing

Angular 7 router '**' wildcard with lazy load module and child routes not working?

由 爷，独闯天下 提交于 2019-12-08 14:47:29
I'm trying to create a default route using the wildcard '**' from Angular's router. That default route will load a lazy module and then it will have to solve its own routes. The problem is that when I have the following configuration it does not resolve as expected: export const routes = [ { path: '', component: 'DashboardComponent' }, { path: '**', loadChildren: './lazy/lazy.module#LazyModule' } ]; @NgModule({ imports: [ BrowserModule, RouterModule.forRoot(routes) ], declarations: [AppComponent] bootstrap: [AppComponent] }) export class AppModule {} const routes = [ { path: '', component:

Angular Route dont call subscription when called itself

由 霸气de小男生 提交于 2019-12-08 11:37:09
问题 Following is my code, the subscription debugger hits first time when Page LOAD and component load first time , when button is clicked and search function is called. the subscription from nginit dont hit. Any idea why public search(): void { debugger; this.router.navigate(['/logs/error'], { queryParams: { file: this.searchQuery }}); } ngOnInit() { this.sub = this.route.params.subscribe(params => { debugger; // (+) converts string 'id' to a number // In a real app: dispatch action to load the

Angular 4 Router. Why “/path1/(<outlet-name>:'path2')” is a thing?

由 这一生的挚爱 提交于 2019-12-08 10:55:50
问题 Are this kind URLs “/services/55/(section:'data')” a workaround to connect named outlets and paths? I don't get why they can't simply be “/services/55/data” when having a Route with the outlet property specified like following: { path: 'services/:id', component: ServicesComponent, children: [ { path: 'data', outlet: 'section', component: ServicesDataComponent } ] } 回答1: I'll provide an answer incase anyone else comes across this issue. To use multiple router outlets and avoid having to use

Angular 7 router '**' wildcard with lazy load module and child routes not working?

由 社会主义新天地 提交于 2019-12-08 05:08:17
问题 I'm trying to create a default route using the wildcard '**' from Angular's router. That default route will load a lazy module and then it will have to solve its own routes. The problem is that when I have the following configuration it does not resolve as expected: export const routes = [ { path: '', component: 'DashboardComponent' }, { path: '**', loadChildren: './lazy/lazy.module#LazyModule' } ]; @NgModule({ imports: [ BrowserModule, RouterModule.forRoot(routes) ], declarations:

Adding new route to Jhipster using Angular 4

由 为君一笑 提交于 2019-12-08 03:08:08
问题 I'm trying to add a new menu item to the default generated JHipster app. I'm using Angular 4 by the way. The problem I'm facing is that I'm always getting the error below. Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'user-profile' The following are the codes I added. Firstly, I added a folder named user-profile under src/main/webapp/app. In it, I added index.ts, user-profile.component.html, user-profile.component.ts and user-profile.route.ts The contents of

Angular router: ignore slashes in path parameters

由 我怕爱的太早我们不能终老 提交于 2019-12-08 01:39:24
问题 I have dynamic routes that could contain slashes or anti-slashes inside parameters , for example: http://localhost:4200/dashboard/T64/27D I should navigate to a page with route T64/27D Here's how I navigate this.router.navigate(['dashboard/'+this.groupListPage[0].code]); this.groupList[0].code contain T64/27D Actually Angular separate T64 and 27D as 2 different pages. Here's the error: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/T64/27D' Error:

Get param from parent component to child component

由 感情迁移 提交于 2019-12-07 20:40:55
问题 There have been so many alterations to the Angular router as of late I don't know how to go about this. I have a param on my parent component called "eventId" which is in the address bar: http://localhost:4200/event/1 In this case it's value is 1. Here's how I declare it in the routing component: { path: 'event/:eventId', loadChildren: './event/event.module#EventModule', canActivate: [AuthGuard] }, So I have a child component which is way down the line: http://localhost:4200/event/1/event

Unable to get the path nor url from angular router

由 吃可爱长大的小学妹 提交于 2019-12-07 20:31:50
问题 I am unable to get the URL nor the path from ActivatedRoute nor Router imports. It outputs a blank for path "" and '/' for URL. I remember using a working version. The only thing that captures the right route the Router.events. I am also unable to subscribe to the URL in the ActivatedRoute. Here is the code import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import { Router, ActivatedRoute, UrlSegment, NavigationStart, RoutesRecognized } from '@angular/router';
订阅 angular-router