The activation of [routerLinkActive] triggers an error related to the data.split function

In my lazy loaded module, I have implemented simple routing as shown below:

<div id="nav">
    <div class="nav-content">
        <div class="nav-item" [routerLink]="'basic'" [routerLinkActive]="active-nav">
            <span class="glyphicon glyphicon-cog"></span>
            Basic Settings
        </div>
        <div class="nav-item" [routerLink]="'map'" [routerLinkActive]="active-nav">
            <span class="glyphicon glyphicon-map-marker"></span>
            Floor Plan
        </div>
    </div>
</div>

However, when I run the server, I encounter an error message starting with:

Uncaught (in promise): TypeError: data.split is not a function TypeError: data.split is not a function at RouterLinkActive.set [as routerLinkActive] (eval ....

I am puzzled by this. Could it be caused by one of my dependencies?

angulartypescript

Answer №1

As opposed to using the attribute version, the binding [routerLinkActive] requires an array. Give this a shot:

[routerLinkActive]="['active-nav']"

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

Is it possible to include parameters in an HTML GET request with Electron.Net?

I have successfully implemented a function in an Angular component within an Electron application using HttpClient: var auth = "Bearer" + "abdedede"; let header = new HttpHeaders({ "Content-Type": 'application/json&a ...

htmlangularelectron

Expressjs - Error: Headers already sent to the client and cannot be set

After testing various solutions from others, I am still unable to resolve this error. My objective is to iterate through each item in the array sourced below: novel.ts export let indexList = (req: Request, res: Response) => { novel.getAllDocuments ...

node.jsmongodbtypescriptexpresspug

Angular material table featuring custom row design

My team is working with a large table that is sorted by date, and we are looking to add some guidance rows to help users navigate through the data more easily. The desired structure of the table is as follows: |_Header1_|_Header2_| | 25/11/2018 | ...

javascriptangularangular-materialmaterial-designangular-material2

Is there a way to invoke a function within a mat-error element?

I need to display an error message in my input field! The function will return true if both passwords match, otherwise it will return false. How can I invoke a boolean function inside mat-error! My Function: checkPasswords(): Boolean { // 'passwords& ...

htmlangulartypescript

Updating array values in Angular 4

I am working with: button *ngFor="let button of buttons" (click)="changeValue()" In my project: export class Home { howMany: number = 10; zoom: number = 5; buttons = [ { howMany: 40, zoom: 10 }. { howMany: 100, zoom: 2 }, { howMany: ...

angular

Unable to compile TypeScript files using gulp while targeting ES5

After starting my first Angular2 app, I encountered an issue where I couldn't use gulp to compile for es5. Below is the dependencies file: "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/compiler-cli ...

angulartypescriptnpmgulpgulp-typescript

Error 2322: Troubleshooting Typescript arrow functions overloads issues

Everything seems to be working well with the code below, except for an error that occurs with the resolve constant. const resolve: Resolve Type '(param: "case 1" | "case 2" | "case 3") => boolean | "string" | ...

typescriptfunctionarrow-functionsconstructor-overloading

Utilizing Regular Expressions in Angular 4 by Referencing Patterns Stored in an Object

I'm facing an issue where my code is functional, but I keep encountering a Tslint error that's proving difficult to resolve. This particular configuration worked fine with Angular 1, but now I'm in the process of migrating the application to ...

angulartypescriptangular-cli

Leveraging external type definitions with certain types that are not made available for export

Currently, I am integrating TypeScript into my ReactJs project along with the Leaflet library for displaying world maps. The challenge arose when I needed to provide type definitions for the Leaflet library, but I discovered that they already exist as a no ...

reactjstypescriptleaflet

Issues installing dependencies in Angular using npm

Today I attempted to create a new project. I used the following command: ng new NAME --style=less However, when I ran this command in my cmder, it resulted in errors and warnings. To troubleshoot, I decided to uninstall Node.js along with the files in R ...

node.jsgitangularnpm

Utilizing TypeScript Generics to Dynamically Set Tag Names in React

I am working on a straightforward polymorphic React component that is designed to render only tag names (such as span) and not custom React components (like MyComponent). I believe this can be achieved using JSX.IntrinsicElements. Here is the code snippet ...

reactjstypescriptpolymorphismjsx

Launching a website by running ng serve on an EC2 instance running Ubuntu 16.04

I have been trying to work on this Git project, but I'm facing issues in getting the website to function properly on my server. Oddly, everything seems to be working fine on my Mac. Despite not encountering any error messages, I am unable to access t ...

node.jsangularnpmangular-cli

Leverage glob patterns within TypeScript declaration files

Utilizing the file-loader webpack plugin allows for the conversion of media imports into their URLs. For example, in import src from './image.png', the variable src is treated as a string. To inform TypeScript about this behavior, one can create ...

typescriptwebpackglobtsconfigwebpack-file-loader

Need help with creating a unit test for the Material UI slider component? An error message saying "Error: Cannot read property 'addEventListener' of null" is displayed when trying to render the component

Encountered a problem while testing the Material-UI Slider with React-Test-Renderer: Uncaught [TypeError: Cannot read property 'addEventListener' of null] Codesandbox Link import React from "react"; import { Slider } from "@materi ...

reactjstypescriptmaterial-uireact-testing-libraryreact-test-renderer

Upcoming 13.4 Error: NEXT_REDIRECT detected in API routes

Here is the code snippet from my /app/api/auth/route.ts file: import { redirect } from 'next/navigation'; export async function GET(req: Request) { try { redirect('/dashboard'); } catch (error) { console.log(error); ...

javascripttypescriptnext.js

Typescript declaration specifies the return type of function properties

I am currently working on fixing the Typescript declaration for youtube-dl-exec. This library has a default export that is a function with properties. Essentially, the default export returns a promise, but alternatively, you can use the exec() method which ...

javascripttypescripttypescript-declarations

Typescript's Patch<T> type enforces strictness within the codebase

There have been instances where I needed to 'patch' an object T using Object.assign(). For instance, when propagating changes you might modify a stateful object that other code references (common in reactive programming like MobX or Vue). It&ap ...

typescriptreactive-programmingpatchinference

Encountered a mistake while trying to deploy an Angular 2 application on Heroku - received an error message indicating an expected expression but instead got

I am encountering an issue with my Angular 2 app. It runs perfectly fine locally, but when I deploy it on Heroku, I'm getting the following errors: >SyntaxError: expected expression, got '<' ><!DOCTYPE html> >shim.min.js ( ...

node.jsangularheroku

Why is it necessary to merge an interface with a function when using the new keyword?

Assuming that the setting noImplicityAny is enabled. Consider the following: function Bar() { this.f = 100; } The following code snippet will not function as expected: let x = new Bar(); An error message will be displayed: 'new' expre ...

typescript

Implementing a string replacement within an array of objects using TypeScript

I have a collection of array objects displayed below [ { "subjectID": 1 "Chosen" : "{subjectsChosen:Python,java,Angular}" "password": "{studentpw:123456abcd}" }, { "subjectID": 2 ...

arraysjsonangulartypescriptjavascript-objects