Navigating to the primary page following the implementation of 'routerLink' and setting the target to _blank

I am currently working in Angular 2 with a TypeScript version of 2.3. The problem I am encountering is that after setting the target to _blank, the link is redirecting to the default page instead of the intended destination.

<a href="javascript:void(0);" title="Student's view" [routerLink]="['/app/quotationsview/e1574258']" target="_blank"><i class="fa fa-eye" aria-hidden="true"></i></a>

Here is an excerpt from my tsconfig file:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "target": "es5",
    "module": "es2015",
    "baseUrl": "",
    "types": [],
    "lib": [
      "es5",
      "es6",
      "dom"
    ]
  },
}

This issue only occurs after building the distribution and works correctly on ng serve.

angulartypescript

Answer №1

<a title="Insight from student" [routerLink]="['/app/quotationsview/e1574258']" target="_blank"><i class="fa fa-eye" aria-hidden="true"></i></a>

Eliminate href=""

DEMO

Answer №2

Use this instead

<a routerLink="/app/quotationsview/e1574258"></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

Developing Your Own Local Variable in Angular with Custom Structural Directive ngForIn

I am hoping for a clear understanding of this situation. To address the issue, I developed a custom ngForIn directive to extract the keys from an object. It functions correctly with the code provided below: import {Directive, Input, OnChanges, SimpleChan ...

javascriptangulartypescriptangular-directive

Error: Module not located - Unable to resolve 'crypto'

Upon running ng serve, I encountered a list of errors that need to be addressed. Here is my package JSON configuration: { "name": "ProName", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "tes ...

javascriptnode.jsangularnpmnem

What are the steps to implement IndexedDB in an Angular application?

I'm searching for a solution to utilize indexedDB within Angular. I need assistance with implementing data recovery or potentially using a browser-based database that doesn't have the 5 MB limit like localStorage. Can anyone point me in the right ...

javascriptdatabaseangularreactjstypescript

Using HTTP POST to subscribe and implementing a try-catch block

When using Angular2's http.post, I encountered an issue where the headers were not sent to the CORS server. To address this, I attempted to create a loop that would retry the request until it succeeds. However, this resulted in an endless loop. How ca ...

javascripthttptypescriptangular

Guide to displaying the continent name on a 3D globe using Reactjs, TypeScript, and Threejs

I am currently working on integrating Threejs into my Nextjs 14 application to create a 3D earth globe using Gltf. However, I am facing an issue where I am unable to display the text of the continent name on their respective continents. I want to have fixe ...

reactjstypescriptnext.jsthree.js

Circular structure error occurred when attempting to convert an object to JSON, starting at an object constructed with the constructor 'Object'

I am facing an issue where I need to update a Medico from the collection, and I have successfully destructured the data of the Medico's name and email. Additionally, I have obtained the ID of the assigned hospital. However, I am having trouble sendin ...

angulartypescript

Setting up the Leaflet routing feature on an Ionic 2 app

Recently, I set up a basic Ionic 2 project that integrates leaflet with the help of this repository: https://github.com/SBejga/ionic2-map-leaflet. Following that, I ran the command: sudo npm install --save leaflet-routing-machine to add leaflet routing m ...

angulartypescriptleaflet

A mistake has been identified: The object could potentially be 'null'. TS2531 for window.document

This is my first time integrating TypeScript into my project. When attempting to access something using window.document.getElementById(), I keep encountering the error: Type error: Object is possibly 'null'. TS2531 I've looked online for ...

javascripttypescripttypescript2.0

A guide on retrieving data from Firestore using TypeScript

I've been diving into a chat project using Angular, and Firestore has given me a bit of trouble. Trying to get the hang of typescript while working with it. Within app.module.ts, kicking things off with: import { provideFirebaseApp, getApp, initi ...

typescriptfirebasegoogle-cloud-firestore

Issue with Angular 2 Custom Pipe not Refreshing Unless Object is Saved

I recently created a custom Angular 2 pipe that formats a phone number from a 10-digit string to 'XXX-XXX-XXXX'. The pipe is functioning perfectly, but the issue arises when it fails to update in real-time during keypress; instead, it updates onl ...

angulartypescript

The module 'AppModule' has imported an unexpected pipe. To resolve this issue, please include a @NgModule annotation

I have successfully created a custom pipe to remove duplicate items from an array and have imported it into my app.module.ts file Below is the code snippet: app.module.ts import { UniquePipe } from './_pipe/uniquePipe'; @NgModule({ imports: ...

arraysangularloopspipe

The element property cannot be found on the specified Element type in ANGULAR

Unable to resolve error in ng build --prod after successful execution of ng serve: Error - Property 'element' does not exist on type 'Element'. https://i.sstatic.net/l3KX4.png Edit-depart.html <form #employeeForm="ngForm& ...

angulartypescript

Clicking on a row in ng2-smart-table should result in the row being

I have attempted to address the issue, but I am struggling to highlight a row on click event. <ng2-smart-table [settings]="settingsPatient" [source]="sourcePatient" (userRowSelect)="patientStudy($event)" (deleteConfirm)="onDeleteConfirm($event)">" ...

javascriptcssangularbootstrap-4ng2-smart-table

The Angular build process is failing to update environment files

Currently utilizing Angular v6. The configuration in my angular.json file is as follows: "test": { "fileReplacements": [ { "replace": "./src/environments/environment.ts", "with": "./src/environm ...

angularangular-cli

A type guard for generics in TypeScript

I'm dealing with a variable that can be either of type C1[] or C2<C1>[]. How can I create a type guard for this variable? interface C<T>{ key: string; secret: T; } private isC(d: Foo[] | C<Foo>): d is C<Foo>[] { ret ...

javascripttypescripttypescasting

Conditionally show a button in an Angular application based on the truthiness of a boolean value

I'm currently developing a simple angular Single Page Application (SPA) for a Pizzeria. Within my application, I have an array that contains various types of Pizzas with string, number, and boolean data types. Using this array, I am dynamically gene ...

angulartypescriptbootstrap-5

When it comes to utilizing BehaviorSubject.value and AsyncSubject in RXJS, it is essential to understand

As a newcomer to RXJS, I am seeking advice on whether my current approach is considered best practice. My situation involves an API that returns a list of countries which needs to be utilized across multiple components. The external API can sometimes be sl ...

angularrxjsreactive

Sending data to the makeStyle function in TypeScript

How can I set the style of backgroundImage in my React component based on the value of post.mainImage? Here is the code snippet: import React from 'react'; import { Post } from '../interfaces'; import { makeStyles, createStyles, Theme ...

reactjstypescriptmaterial-uinext.js

What is the process for choosing a specific id from a JSON structure?

Is there a way to extract specific data from a JSON format within an Ionic project? What is the process for selecting the ID associated with particular data in a JSON format? And how can I retrieve and display the value linked to the selected product&apos ...

javascriptjsonangulartypescriptionic-framework

Using Typescript to define the return value of an object's key value pair

Having just created the method getSpecificPlacementOption, I am faced with defining its return value in Typescript. As a newcomer to this language, I find myself unsure of how to go about it. Within my object called placementOptions, I aim to return a spec ...

javascripttypescript