Encountering an issue of Maximum call stack size exceeded that couldn't be

core.js:4442 ERROR RangeError: Maximum call stack size exceeded
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:271)
    at SafeSubscriber.next (Subscriber.ts:207)
    at Subscriber._next (Subscriber.ts:139)
    at Subscriber.next (Subscriber.ts:99)
    at BehaviorSubject.Subject.next (Subject.ts:70)
    at BehaviorSubject.next (BehaviorSubject.ts:43)
    at SharedService.push.r2F1.SharedService.setTitleInfo (shared.service.ts:92)
    at AppComponent.push.Sy1n.AppComponent.nameChangeFunction (app.component.ts:190)
    at app.component.ts:167
    at SafeSubscriber.schedulerFn [as _next] (core.js:24931)

The above code snippet highlights an error that I am encountering in my application.

This error is being triggered within the app.component.ts file, as shown in the following code:

I seem to be facing some confusion regarding the cause of this error appearing in the console.

ngAfterViewChecked() {
        this.titleSubscription = this.sharedService.getTitleValue()
        .subscribe(item => {
            this.customNameData = false;
            if (item === 'View My Request' || item === 'Request Management') {
            this.nameChangeFunction(item)
            }
            const substring = 'customNameData';
            if (item.includes(substring)) {
                const length = item.length;
                const res = item.substr(14, length);
                this.title = res;
                this.customNameData = true;
            } else {
                this.title = item
            }
        });

        this.routerLinkSubscription = this.sharedService.getRouterLinkValue()
        .subscribe(item => {
                this.routerLink = item
        });

        this.cdr.detectChanges();
     }

     nameChangeFunction(item) {
        if (item === 'View My Request' || item === 'Request Management') {
          this.sharedService.setTitleInfo({
            data: item
          });
        }
    }

It seems like there might be an issue with the shared.service.ts file. Despite attempting to clear the stack, I have not found a successful solution yet. Any guidance on resolving this would be greatly appreciated.

setTitleInfo(name: any) {
    this.setTitle.next(null);
    this.setTitle.next(name);
  }

If anyone can provide insight into what may be causing this error and how it can be resolved, I would be grateful for the assistance.

Answer №1

Include Title and Router in the constructor of app.component.ts

constructor(private router: Router,
            private titleService: Title) { }

Next, within the ngOnInit() method, subscribe to router events.

this.router.events.subscribe(data => {
      if (data instanceof ActivationStart) {
        var title = data.snapshot.data.title;
        if (title) {
          this.titleService.setTitle(title);
        }
        else {
          this.titleService.setTitle('Default Title');
        }
      }
    })

In each route, specify the title in the data object:

{
   path: 'Path Name',
   data: { title: 'Route Title' },
   component: YourComponent,
},

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

Exported data in Vue3 components cannot be accessed inside the component itself

Essentially, I'm working on creating a dynamic array in Vue3. Each time a button is clicked, the length of the array should increase. Below is the code snippet. <div class="package-item" v-for="n in arraySize"></div> e ...

What is the best way to convert a date to ISO 8601 format using JavaScript? Are there any built-in functions or methods in

Currently, I am using this function to set the duration: const setDuration = () => { const currentDate = new Date(); const newDate = new Date(currentDate.getTime()); const year = newDate.getUTCFullYear(); const m ...

Tips for sending web push notifications:

Currently, I have an Angular Progressive Web App (PWA) connected to a Laravel back-end serving as an admin panel. My goal is to implement web push notifications to the PWA whenever the admin creates a new News article on the back end. Since there is no use ...

What is the correct way to implement Vue.use() with TypeScript?

I am trying to incorporate the Vuetify plugin into my TypeScript project. The documentation (available at this link) suggests using Vue.use(), but in TypeScript, I encounter the following error: "error TS2345: Argument of type '{}' is not assign ...

MUI provides the flexibility to adjust the opacity separately for Chip labels/icons and backgrounds

My objective is to customize the opacity of label/icon and background in MUI Chip. I want the label & icon to have an opacity of 1, while the background should have an opacity of 0.0571. Technologies used in this project include React, TypeScript, Materia ...

Tackling the white-source security problem in npm libraries

A security advisory from White-source has identified high vulnerability issues with certain libraries used in your repository, specifically with yargs-parser: 1. build-angular-0.13.8.tgz (Root Library) node-sass-4.11.0.tgz sass-graph-2.2 ...

a search-enabled dropdown menu within an Angular input field

I can't seem to get the input box to display in my code below. Can you help me figure out why? component.html <form [formGroup]="formGroup" (validSubmit)="onSubmit()"> <div class="form-group mb-3"> ...

Animating ng-bootstrap modals

It seems like the fade class is not working on the ngb-modal. I tried to create my own animation for the modal, but the ng-bootstrap injects the modal template into the dialog, making it difficult to access the dialogue itself. I only have access to the t ...

Error encountered when implementing TypeScript with React's useState hook using generics

While utilizing a generic type in the react useState hook, I encounter an unusual error: // Extract from react typings type SetStateAction<S> = S | ((prevState: S) => S); type Dispatch<A> = (value: A) => void; declare function useState< ...

Typescript absolute imports are not being recognized by Visual Studio Code

Encountered a similar unresolved query in another question thread: Absolute module path resolution in TypeScript files in Visual Studio Code. Facing the same issue with "typescript": "^4.5.5". Here is the content of my tsconfig.json: { ...

Can the native script plugin background-http be used to upload an image file to an endpoint with the following properties:

Headers: Content-Type: application/x-www-form-urlencoded Authorization: token Body: Form-Data Key: "name" Value: image-file It seems a bit odd to me because usually application/x-www-form-urlencoded is used for toBase64String uploads, but here the endpoi ...

UIManager is not recognized within this context

I'm currently working on a project where I've created a class called UIManager to manage UI changes... /// <reference path="../../typings/jquery/jquery.d.ts" /> /// <reference path="../../typings/materialize-css/materialize-css.d ...

Do not include the "dist" folder when exporting sub-modules in TypeScript

I've developed a basic module called modA: modA/ - package.json - dist/ - index.js - db.js - stuff.js My goal is to use the submodules "db" and "stuff" like this: import * as db from modA/db -- how can I achieve this? My package.json has main: ...

Iterating through typescript enums in Vue using v-for

Why is the v-for loop over an enum displaying both names and values? Is there a way to iterate only over the keys? export enum Colors { "RED" = 1, "BLUE" = 2, "GREEN" = 3, } <template> <div> <v ...

Angular encountered an error when trying to access the property "fruits" of an undefined object

When working with Angular, I encountered an issue where I received the error message "cannot read property 'fruits' of undefined." Within my class definition, I have included the following: export class MyClass implements OnInit { fruits: any[] ...

Exploring the power of Angular CLI and webpack

Exploring the capabilities of angular cli https://github.com/angular/angular-cli#documentation After creating a basic app, I can easily access it on localhost. Upon inspecting the localhost site, I notice the css and js links that are added by webpack. ...

Is there a way for me to modify a value in Mongoose?

I have been attempting to locate clients by their ID and update their name, but so far I haven't been successful. Despite trying numerous solutions from various sources online. Specifically, when using the findOneAndUpdate() function, I am able to id ...

Retrieving an individual instance of a component

Is there a way to access a specific instance of a component within an app that uses it multiple times in other components? Currently, when I use the query command "fixture.debugElement.query(By.directive(ComponentName)).componentInstance;", it only recogni ...

What is the best way to assign a variable with the type (x:number)=>{y:number,z:number}?

I am trying to initialize a variable called foo, but my current code is not compiling successfully. let foo: (x: number) => {y:number,z: number} = (x) => {x+1, x+2}; This results in the following error: Left side of comma operator is unused and ha ...

When using the imported function, a TypeError occurs: "... is not recognized as a valid function."

I often use a function across multiple files, and it works perfectly like this: import moment from 'moment'; let monthAsString = (month: number): string => { return moment().locale('de').month(month - 1).format("MMMM"); } config ...