angular-routing – Page 2

Angular router: how to replace param?

May 4, 2023 by Tarik

To navigate to particular link from current url, you can do something like this, constructor(private route: ActivatedRoute, private router: Router){} ngOnInit() { this.route.params.subscribe(params => { // PARAMS CHANGED .. let id = params[‘projectid’]; }); } navigate(){ this.router.navigateByUrl(this.router.url.replace(id, newProjectId)); // replace parameter of navigateByUrl function to your required url } On ngOnInit function, we have subscribed … Read more

How to elegantly get full url from the ActivatedRouteSnapshot?

April 23, 2023 by Tarik

There’s no ready to use function from Angular router to achieve that, so I wrote them: function getResolvedUrl(route: ActivatedRouteSnapshot): string { return route.pathFromRoot .map(v => v.url.map(segment => segment.toString()).join(“https://stackoverflow.com/”)) .join(“https://stackoverflow.com/”); } function getConfiguredUrl(route: ActivatedRouteSnapshot): string { return “https://stackoverflow.com/” + route.pathFromRoot .filter(v => v.routeConfig) .map(v => v.routeConfig!.path) .join(“https://stackoverflow.com/”); } Example output when route is from ProjectComponent: const … Read more

RouterModule.forRoot called twice

March 30, 2023 by Tarik

I got this error because I somehow accidentally imported the root AppModule into my lazy-loaded module. This caused the root AppRoutingModule to be called again when the lazy-loaded module was loaded, and thus RouterModule.forRoot was called twice. If you are certain you aren’t calling RouterModule.forRoot twice then this could be the cause of the issue. … Read more

Angular ActivatedRoute data returns an empty object

January 28, 2023 by Tarik

Edit: the problem is that I was trying to access the ActivatedRoute from a Component which is outside the <router-outlet>. So it looks like that this is the intended behaviour. However I still think that my answer below can be useful to anyone who is trying to accomplish the same thing. I found a workaround … Read more

How to trace routing in Angular 2?

January 25, 2023 by Tarik

You can pass in a second argument with options: imports: [ RouterModule.forRoot( routes, { enableTracing: true } // <– debugging purposes only ) ] Angular will then log all events to the browser’s console, per the documentation: enableTracing?: boolean When true, log all internal navigation events to the console. Use for debugging.

Best method to set different layout for different pages in angular 4

January 22, 2023 by Tarik

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

What is the difference between ActivatedRoute and ActivatedRouteSnapshot in Angular4

January 20, 2023 by Tarik

Since ActivatedRoute can be reused, ActivatedRouteSnapshot is an immutable object representing a particular version of ActivatedRoute. It exposes all the same properties as ActivatedRoute as plain values, while ActivatedRoute exposes them as observables. Here is the comment in the implementation: export class ActivatedRoute { /** The current snapshot of this route */ snapshot: ActivatedRouteSnapshot; If … Read more

angular 4 unit testing error `TypeError: ctor is not a constructor`

January 10, 2023 by Tarik

This can be an error in the providers declarations. When you try to mock a provider and use useClass instead of useValue the error “TypeError: ctor is not a constructor” is fired. Here is an example that fires the error : providers: [{provide: OrderService, useClass: new OrderServiceMock()}] The correct declaration is : providers: [{provide: OrderService, … Read more

How to apply canActivate guard on all the routes?

January 7, 2023 by Tarik

You can introduce a componentless parent route and apply the guard there: const routes: Routes = [ {path: ”, canActivate:[AuthenticationGuard], children: [ { path : ”, component: UsersListComponent }, { path : ‘add’, component : AddComponent}, { path : ‘:id’, component: UserShowComponent }, { path : ‘delete/:id’, component : DeleteComponent }, { path : ‘ban/:id’, … Read more

angularjs 1.6.0 (latest now) routes not working

January 6, 2023 by Tarik

Simply use hashbang #! in the href: <a href=”#!/add-quote”>Add Quote</a> Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string (”) to the bang (‘!’). If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to your application: … Read more