Angular child routes experiencing encryption

Struggling to find a working example of child component routing being used AFTER a parameter:

Currently, profile/userName works but the children do not.

{ path: 'profile/:userName', component: ProfileComponent, 
    children: [
        { path: 'deets', component: DeetsComponent }
    ]
},

Encountering an issue where I receive the error message: 

Error: Cannot match any routes. URL Segment: 'profile/admin%40admin.com/%5B'deets'%5D'

Uncertain if it's related to encoding in the URL or perhaps a mistake in my routing implementation causing this error?

Developing with Angular 4.1

angularparametersroutes

Answer №1

The URL 'profile/admin%40admin.com/%5B'reviews'%5D' contains special characters that have been encoded, causing them to not match the defined route's path.

To understand more about URL encoding, refer to w3schools: https://www.w3schools.com/tags/ref_urlencode.asp

Answer №2

This was my solution to ensure functionality in Angular 4.4 with @angular/cli version 1.4.5 and node.js 6.11.3.

<a routerLink="/detail/{{product.id}}" routerLinkActive="active"> VIEW DETAILS </a>

Answer №3

It appears that you may be passing an input to a routerLink property without enclosing it in square brackets.

Switching from routerLink= to [routerLink]= is crucial. Omitting the square brackets treats the link as a string, leading to encoding errors when navigating to the route.

<a [routerLink]="['detail', item.id, 'deets']">DETAIL</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to utilize and display data in a *ngFor loop

I have created a simple service for accessing an HTTP service. Can anyone help me with how to bind this service information in *ngFor? import { Component } from '@angular/core'; import {Http } from '@angular/http'; import { In ...

angularangular2-services

Capturing user input with Angular Material forms in HTML

In the process of working on a project in Angular, I am utilizing the Angular Material component library. As part of this project, I am creating a form with multiple fields. Everything is functioning properly, however, the layout appears slightly off: ht ...

htmlangulartypescriptangular-material

Why does the property of {{hero.name}} function properly in a <h> tag but not in an <img> tag?

Within this template, the code below functions correctly: <h3>{{hero.name}}</h3> It also works for: <a routerLink="/details/{{hero.id}}">{{hero.name}}</a> However, there seems to be an issue with the following image path ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire

The release of the Angular App within a webjar is causing problems relating to the baseHref

Currently, I am looking to package my Angular frontend in a webjar so that it can be easily imported via Maven into any Java backend. Successful in this task, I now have a Spring Boot backend with an application.properties file showing: server.servlet.cont ...

angularspringmavenwebjars

"Exploring the world of Typescript with the Drawflow library

Currently, I am integrating the fantastic Drawflow library created by @Jerosoler (available at: https://github.com/jerosoler/Drawflow) into my PrimeNg project. User @BobBDE has provided typescript definitions for this library here: https://www.npmjs.com/p ...

angulartypescriptnpmundefinedprimeng

Mapping an array based on specific conditions

When using my photo gallery app, I faced a challenge in mapping an array of images based on the user-selected album name. The current setup works perfectly for the 'Cambodia' album where all images are correctly logged in the console after mappin ...

javascriptangular

Merging Two JSON Objects into a Single Object Using Angular 4-6

Two JSONs are available: The first one (with a length of 200): {date_end: "2099-12-31", id: "2341"} {date_end: "2099-12-31" id: "2342"} ... The second one (length 200): {type: "free", discount:"none", warranty: "yes"} {type: "free", discount:"none", ...

angulartypescript

Tips for confirming a date format within an Angular application

Recently, I've been diving into the world of Angular Validations to ensure pattern matching and field requirements are met in my projects. Despite finding numerous resources online on how to implement this feature, I've encountered some challenge ...

javascripthtmlangulartypescript

How can one correctly log out of an Angular application that is integrated with Firebase Authentication and Firestore?

How can I efficiently sign out of an Angular application that uses Firebase Authentication and Firestore? Although I can successfully sign in with Google authentication, signing out poses some challenges. My ultimate goal is to ensure that when a user cli ...

angularfirebasegoogle-cloud-firestorefirebase-authenticationangularfire

"Data in Fusioncharts appears to be correctly formatted, but it is having difficulties

I am developing a financial analysis tool and I need to visualize stock data using fusion charts. Currently, my dataset includes stock values along with their respective dates: $scope.chartData = [ { "label": "2017-05-11 16:00:00", "value": "930.6" } ...

angularfusioncharts

Tips on ensuring dispatch is finished before accessing store data. Ngrx dilemma

Is there a way to ensure that a dispatch is completed before selecting from a store? I haven't had any luck finding a solution online. How can I make sure the dispatch finishes before selecting from the store? I would appreciate any help with my code ...

node.jsangularngrxngrx-effectsngrx-store-4.0

Why isn't the parent (click) event triggered by the child element in Angular 4?

One of my challenges involves implementing a dropdown function that should be activated with a click on this specific div <div (click)="toggleDropdown($event)" data-id="userDropdown"> Username <i class="mdi mdi-chevron-down"></i> </d ...

angulartypescripteventsevent-bubbling

Is there a way to effectively sort through Firebase database entries using Angular based on checkbox selection?

I am working on an event page where all events are displayed with a category field. This is how my database structure looks: category: - categoryName events: - eventName - category.id (stores the category id) My goal is to initially display all eve ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire

The request to DELETE the employee on the server at http://localhost:3000/employees/$%7Bid%7D could not be processed because it was not found

removeEmployee(id: number): Observable<any> { return this._http.delete('http://localhost:3000/staff/${id}'); } } error:HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: 'Not Found', url: 'http://localhost:30 ...

angular

What Mac OSX command can you use in Typescript to input the quote character for multiline text?

Just starting out with Angular 2 and working through the official tutorial at https://angular.io/docs/ts/latest/tutorial/toh-pt1.html. I've realized that to use multi-line template strings (string interpolation), I have to use the ` mark. Any tips fo ...

angularmacostypescript

Uh-oh! Angular 6 has encountered an unexpected error with template parsing

I am currently working on an Angular application where I have integrated the FormsModule from '@angular/forms' in my app.module.ts. However, despite this, I keep encountering the error message No provider for ControlContainer. Error log: Uncaug ...

javascriptangulartypescript

Is there a way for me to navigate from one child view to another by clicking on [routerLink]?

Currently, I am facing an issue with switching views on my Angular website. The problem arises when I attempt to navigate from one child view to another within the application. Clicking on a button with the routerlink successfully takes me to the new view, ...

angulartypescriptrouter

TypeScript Interfaces: A Guide to Defining and

In my angular2 application, I have created interfaces for various components. One of these interfaces is specifically for products that are fetched from a remote API. Here is the interface: export interface Product { id: number; name: string; } ...

typescriptangular

Node.js/Express API Endpoint Ceases Functioning

In my Angular/Express.js app, there is a post method within my api.service.ts file: post(data: any, endpointUrl: string): Observable<T> { console.log("REACHED POST METHOD") return this.http.post<T>(`${this.apiUrl}/${endpoint ...

javascriptangularexpress

Error Encountered During Angular Production Build: Plugin "proposal-numeric-separator" Not Found

After trying to build the production version, I encountered an error message stating that Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it.. Please refer to the screenshot of the error attached b ...

angularnpmangular8npm-installng-build