The lack of displaying the actual path in DevTools when using RouterLink in Angular 5

Could this be a bug or a specification that I can't seem to find in Angular 5? When I use routerLink in the following way:

<button routerLink="/account/order/{{this.orderService.order._id}}/messages">Messages</button>

Everything works fine and I can navigate to the URL 

/account/order/5aaaa0c6fd204609b3bd2577/messages
in my component. However, when I inspect it in Chrome DevTools (and I also tried in Firefox), I notice a discrepancy:

<button _ngcontent-c4="" class="btn" tabindex="0" ng-reflect-router-link="/account/order/5aaaa0c6fd20460">Messages</button>

I have attempted using different methods for routerLink, but the issue persists with the URL being truncated (I even tried creating the URL string in the component.ts file and passing it as a variable to routerLink). Initially, it seems like there is a limit to the length of ng-reflect-router-link. Yet, when I use a simple string in the href attribute, the DevTools display the link normally like this:

<button _ngcontent-c4="" class="btn" routerlink="/123456789123456789123456789123456789123456789123456789123456789" tabindex="0" ng-reflect-router-link="/12345678912345678912345678912">Messages</button>

Does anyone know why the actual href is being cut off? Is this a known behavior documented anywhere or is this potentially a bug that needs to be reported on the GitHub Angular repository?

angulartypescriptgoogle-chrome-devtoolsangular5routerlink

Answer №1

Explanation sourced from a GitHub issue.

It is generally not recommended to use button tags for navigation due to accessibility concerns. You can read more about this topic at

If you apply [routerLink] to an anchor tag, the href attribute is correctly set. The href attribute is what a user sees when they hover over a link. Buttons should not have an href attribute, which is why you do not see this property reflected in the DOM.

The ng-reflect properties are meant for debugging purposes during development only. They are truncated to prevent dumping large amounts of data into the DOM.

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

Using React Testing Library with TypeScript revealed issues with ES6 modules causing test failures

I am currently working on a small project that involves React, Typescript, and Mui v5. The application is relatively small and uses the default Create React App setup. Although I am new to unit and integration testing, I am eager to make use of the tools ...

reactjstypescriptmaterial-uireact-testing-librarybabel-jest

Having trouble iterating over fields of an interface in TypeScript?

I am currently facing an issue while trying to loop through the keys of an object that contains an interface. TypeScript seems to be unable to recognize the type of the key. interface Resources { food?: number water?: number wood?: number coal?: n ...

typescript

Electron and React: Alert - Exceeded MaxListenersWarning: Potential memory leak detected in EventEmitter. [EventEmitter] has 21 updateDeviceList listeners added to it

I've been tirelessly searching to understand the root cause of this issue, and I believe I'm getting closer to unraveling the mystery. My method involves using USB detection to track the connection of USB devices: usbDetect.on('add', () ...

javascriptnode.jsreactjstypescriptelectron

What's the best way to set up multiple NestJS providers using information from a JSON file?

Recently diving into NestJS, I am in the process of building an application following the MVC architecture with multiple modules including: Project | +-- App.Controller +-- App.Service +-- App.Module | +-- SubModule1 | | | +-- SubModule1.C ...

javascriptnode.jstypescriptbackendnestjs

What would be the best dimension for an Angular 11 module?

Picture yourself developing a brand new modular app in Angular and facing the decision of when to create a new module. Is it considered best practice to create a module per page if the pages do not have common components? Is there an optimal size for Ang ...

angularangular11

Utilizing Angular2 with Webpack in Visual Studio 2015

Is there a way to utilize Visual Studio 2015 alongside Webpack and Angular2? I have successfully created an Angular2 App with VS, but now that I've added Webpack to build my app, I would like to debug all of my code using IIS Express. I want to be abl ...

visual-studioangulartypescriptnpmwebpack

Ensuring Type Compatibility Between Classes and Object Literals in TypeScript

When working with TypeScript, it is important to note that an object literal can be assigned to a class typed variable as long as the object provides all properties and methods required by the class. class MyClass { a: number; b: string; } // The co ...

typescript

What is the process for changing the src property to a URL that is outside of the project

Currently, I am developing a project using Ionic. My goal is to include a variable that holds the URL of an image in an image tag. <div *ngFor="let item of imagearr"> <img [src]="item.image.URL"> Unfortunately, when I attempted this method, i ...

angularionic-framework

Angular 8's cutting-edge feature: the dynamic password validator

Hello, I have an API that returns an array object called passwordPolicy with the following properties: PasswordMinLength: 6 passwordMinLowerCase: 1 passwordMinNumber: 1 passwordMinSymbol: 0 passwordMinUpperCase: 1 The values of these properties can change ...

angularangular8angular-reactive-formsangular-validationangular-validator

Angular 6: Inconsistent performance of [(ngModel)] functionality

In my Angular 6 project, I am utilizing Bootstrap Modals to implement a specific functionality. Upon clicking the modify button, a modal window should appear with pre-filled values. https://i.sstatic.net/PIg0L.jpg Although I am using template-driven form ...

angular

Angular Material Design Components is displaying the error message "The mixin mdc-top-app-bar-fill-color does not exist"

Currently, I'm working with angularCLI and angular-MDC and I am trying to implement the second color from my styles.scss file. I came across this syntax on the following website which is mdc-top-app-bar-fill-color($color). When I tried using it, I re ...

angularscss-mixinsmdc-components

Ways to trigger an event based on the outcome of a pop-up window

In my current project, I am working on a component that includes three buttons: two default options and an additional modal dialog option for more advanced choices. When one of the default buttons is clicked, the component emits an event based on the selec ...

angularangular-material

Disruptions in typing occur due to errors popping up while utilizing zod and react-hook-forms within a TypeScript application

Currently, I am working on developing a registration page for users using react-hook-forms for the registration form and zod for validation. Initially, when testing the form, I noticed that errors only appeared after submitting the form. However, once the ...

reactjstypescriptvitezod

What is the best way to retrieve the name of a static method within a class?

In my code, I am logging multiple messages in a static method and I want to use the method name as context. However, I do not want to create a separate variable called `context` and assign the function/method name to it. I would like to be able to access ...

typescript

I encountered an issue when trying to call a class in angular 2, receiving the error message "Supplied parameters do not match any

A new class named items-class.ts was successfully created: export class ItemsClass { constructor(public name:string, public desc:string, public stat:string){} } To implement this class in a component called app.component.ts: import { Component } fro ...

angulartypescript

How can I update a property within an object in a sequential manner, similar to taking turns in a game, using React.js?

I am currently working on a ReactJs project where I am creating a game, but I have encountered an issue. I need to alternate turns between players and generate a random number between 1 and 10 for each player, storing this random number inside their respec ...

javascriptreactjstypescriptobjectgame-physics

Save information on the server and organize it into an array for use in local operations

Currently, I am working on the ShoppingApp using Angular for the front-end and Firebase for the backend. I have defined a model for the category as follows: import { ProductModel } from "./product.model"; export class CategoryModel { public id: number; ...

angulartypescriptfirebase

Error: Trying to access 'MaterialModule' before it has been initialized results in an uncaught ReferenceError

I have been working on a form for a personal project and attempted to implement a phone number input using this example: . However, after trying to integrate it into my project, I encountered an error. Even after removing the phone number input code, the e ...

htmlangulartypescript

There are occasional instances in Angular 6 when gapi is not defined

I am currently developing an app with Angular 6 that allows users to log in using the Google API. Although everything is working smoothly, I encounter a problem at times when the 'client' library fails to load and displays an error stating gapi i ...

javascriptangulargmail-api

I encountered an issue trying to locate the module '@angular/compiler-cli'

I've encountered an issue with my new project as it's not allowing me to run 'ng serve' due to the 'cannot find module @angular/compiler-cli' error. Despite trying to clear the cache and deleting the node_modules folder withi ...

angular