Angular : Error: Uncaught (in promise) at webpackAsyncContext (eval at ./src/$$_lazy_route_resource
Do not import your lazy loaded module within your main app.module.ts. This will cause a circular dependency and throw the error you are receiving.
angular-router
anchor href vs angular routerlink
Href is the basic attribute provided by Html to navigate through pages which reloads the page on click. routerLink is the attribute provided by angular to navigate to different components without reloading the page. Major difference between both is that href kills the state of the current page where routerLink doesnt lose the state of … Read more
Angular2 router appends component instead of replacing it
By using the method of elimination, I found out that the culprit of the issue was the BrowserAnimations module in my app.module.ts. By removing it from my imports it the problem went away. I’ll look into creating a Plunker to demonstrate it. Update: This is described in this Github issue. Update 2017-12-13: This has now … Read more
Navigation ID is not equal to the current router navigation id error
I figured it out! There was code in a component that was calling router.navigate() on a NavigationEnd event. So the answer was similar to the answer in this S.O. issue (rapidly changing the route). I got this error because I was calling router.navigate twice in quick succession, (1 to append queryParams, 1 to append a … Read more
Angular Passing Data Between Routes
In the current version this is now available in @angular/router. Angular 7.2 introduces route state to NavigationExtras, which takes an object literal similar to queryParams, etc. The state can be set imperatively: this.router.navigate([‘example’], { state: { example: ‘data’ } }); or declaratively: <a routerLink=”/example” [state]=”{ example: ‘data’ }”> Hello World </a> And read in a … Read more
How do you mock ActivatedRoute
A simple way to mock ActivatedRoute is this one: TestBed.configureTestingModule({ declarations: [YourComponenToTest], providers: [ { provide: ActivatedRoute, useValue: { params: Observable.from([{id: 1}]), }, }, ] }); Then in your test it will be available and your function should work with this (at least the ActivatedRoute part) You can get it with TestBed.get(ActivatedRoute) in your it … Read more
router.navigate with query params Angular 5
Can be of that you had placed the bracket which is supposedly for the 1st param but you had encapsulated it on the whole line of route Your code: // This is the end of your route statement: ‘}}]);’ which the close bracket is included this.router.navigate([`${link.split(‘?’)[0]}`, { queryParams: {id: 37, username: ‘jimmy’}}]); Update route: place … Read more
Best method to set different layout for different pages in angular 4
You can solve your problem using child routes. See working demo at https://angular-multi-layout-example.stackblitz.io/ or edit at https://stackblitz.com/edit/angular-multi-layout-example Set your route like below const appRoutes: Routes = [ // Site routes goes here { path: ”, component: SiteLayoutComponent, children: [ { path: ”, component: HomeComponent, pathMatch: ‘full’}, { path: ‘about’, component: AboutComponent } ] }, // … Read more
Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run()’?
Usually this happens when you are wrapping angular calls inside some external js callback, from external JavaScript not related to angular code. Example app.component.ts: callMyCustomJsLibrary() { googleSdk.getLocations(location => this.getEmployees()); } getEmployees(): void { this.employeeService.getEmployees().subscribe(e => { this.employees = e; }); } In this case you will have to include the call into the NgZone, example: … Read more
How do I navigate to a parent route from a child route?
Do you want a link/HTML or do you want to route imperatively/in code? Link: The RouterLink directive always treats the provided link as a delta to the current URL: [routerLink]=”[‘/absolute’]” [routerLink]=”[‘../../parent’]” [routerLink]=”[‘../sibling’]” [routerLink]=”[‘./child’]” // or [routerLink]=”[‘child’]” // with route param ../../parent;abc=xyz [routerLink]=”[‘../../parent’, {abc: ‘xyz’}]” // with query param and fragment ../../parent?p1=value1&p2=v2#frag [routerLink]=”[‘../../parent’]” [queryParams]=”{p1: ‘value’, p2: … Read more