Exploring new features in Angular 12: navigating and refreshing pages

I have an Angular application where I need to reload the page after navigation. I tried using this solution, but the window.location.reload(); method does not work in production. As a workaround, I added useHash: true in the app-routing.module.ts file. However, this approach causes issues when implementing SSR in the application. So I am looking for an alternative way to achieve the same result as shown below:

this.router.navigate(['path/to'])
  .then(() => {
    window.location.reload();
  });

I have also attempted to use 

window.location.href = window.location.href
and 
window.location.href = window.location.protocol + '//' + window.location.host + '/path/to';
instead of window.location.reload();, but none of these methods reload the page as expected.

Is there another approach to reloading the page after navigating in Angular 12? Any help or guidance would be appreciated.

Edit : Why reloading is needed: After a user logs in, notifications are displayed in the header. These notifications do not appear unless the page is manually reloaded.

javascriptangulartypescriptnavigationreload

Answer №1

If you want to navigate back to the root before reaching your final destination, consider using this method:

this.router.navigate(['/'])
  .then(() => {
    this.router.navigate(['path/to'])
  });

Answer №2

To refresh a page after a certain timeout, you can implement the following method in the ngOnInit() of the specific component path:

ngOnInit(): void {
   
    if (!sessionStorage.getItem('reload_called')) {
      setTimeout(() => {
        console.log('refreshing page');
        sessionStorage.setItem('reload_called', 'true');
        window.location.reload();
      }, 2000);
    }
  }

By using sessionStorage, you ensure that the timeout is only triggered once to prevent unnecessary reloading.

I hope this solution proves useful to someone seeking assistance with a similar issue.

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

Angular - The source of all console errors can be traced back to instrumentConsole.js

In the midst of working on a large Angular 11 project, I have been encountering all of my console errors originating from instrumentConsole.js. It would be more beneficial if I could pinpoint the exact file that produced the error, so I am looking to reve ...

angularconsole.log

Generate Sub Menu for Navigation Bar based on Main Menu Selection

I'm currently working on dynamically setting menu items and sub menu items using React Props. My code successfully iterates through the main list items navItems.label and displays them. However, I'm facing an issue with displaying the sub menu i ...

javascriptarraysreactjs

implementing the reuse of form control names for multiple dropdowns in an Angular application

When using the dropdown menu, I am facing an issue where selecting a value from the second dropdown makes it disappear. This is because both dropdowns are using the same formControlName to pass values to the backend with the same header. How can this be fi ...

angular

Tips for storing headers in NODE.JS?

Recently started learning NODE.JS Looking for some guidance. When I try to execute the command below: npm install --save express-handlebars I encounter the following error message: + <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf ...

javascriptnode.jsexpressnpm

List of elements in JSON file with key value pairs and their indexes

Is there a way to create a function that can scan through a JSON file and identify the index where a specific key-value pair is located within an object? For instance, if we were searching for value: '100.0' in the following JSON data, the functi ...

javascriptajaxjson

Issue with JQuery: Inability to deactivate an element after receiving an Ajax response

My dynamic dialogue box, generated via Ajax return, presents a challenge involving the dynamically changing drop-down list element $('#functionSelect'). I require this list to trigger disabling of input fields within the dialogue box upon changes ...

javascriptjqueryhtmlajax

The reference to the Material UI component is not functioning

I am currently working on a chat application and have implemented Material UI TextField for user message input. However, I am facing an issue with referencing it. After researching, I found out that Material UI does not support refs. Despite this limitatio ...

javascriptreactjsmaterial-ui

Dealing with React Native text overflowing beyond the screen width when using FlexWrap

I'm currently working on implementing a component in react native that consists of a row containing and components, but I'm struggling to achieve the desired outcome. Here's my current code: <View style={{ flexDirection: ...

javascriptreactjsreact-nativeflexbox

Tips for implementing date filtering in Angular2

I am facing an issue in my class where I need to implement date filtering, similar to Angular 1: $filter('date')(startDate, 'yyyy-MM-dd HH:mm:ss') For Angular 2, it seems like the DatePipe class can be used for this purpose. However, ...

angularjsangulardate-format

New replacement for the .selector method that has been eliminated in JQuery version 3.0

The JQuery version 3.0 has permanently removed the .selector property, leaving me confused about what to use as a replacement for it. I currently have utilized the .selector like this in my code: var TaxYearNode = $(EmployerLatestYear).find("TaxYear&q ...

javascriptjqueryasp.netajaxjquery-ui

AngularJS: $watch event was not fired

Attempting a simple task here. Inside my controller: $scope.testObject = { name : 'john' }; $scope.$watch('$scope.testObject.name', function (e, n, v) { console.log('reached'); }); In my view: <input type ...

javascriptangularjs

Display information from an array in checkboxes. If the same data appears in another array, the corresponding checkbox in React will be automatically checked

I currently have two arrays. The first array, let's call it arr1, contains multiple objects such as [{"Name":"Mr.X"},{"Name":"Mr.Y"},{"Name":"Mr.Z"}]. The second array, named arr2, holds a few values like [{"Name":"Mr.Z"}]. My goal is to display all ...

javascriptreactjsmaterial-ui

Prevent scale animation for a specific section of the icon using CSS

I need help in preventing the scale animation of the :before part of the icon class from occurring when the button is hovered. The current behavior is causing the arrow to look distorted on hover... Link to the code on Codepen HTML <div class="se ...

javascripthtmlcss

What is the best way to enlarge the parent element while also enlarging the child element?

I have a situation where I need to ensure that two classes have elements of the same height. When the children element's height increases, the parent element should also increase in height. The parent element has the class name .user-data and the chi ...

javascriptcss

Looking to showcase an uploaded image next to the upload button in Vue.js using Element.ui?

I am currently working on implementing a feature that allows users to preview an image after uploading it. My approach involves uploading the image and then making an axios/AJAX call. Please see the following code snippet for reference: HTML code: ...

javascripthtmlvue.jsfile-uploadelement-ui

Using JavaScript with JSON in Facebook

Is it possible to assign the height of a document to a variable called H? If so, how can I do this? var H = document.height; var p = { width: 520, height: H }; FB.Canvas.setSize(p); In JavaScript, how can I achieve this? The expression height: H did not ...

javascriptjsonfacebook

Tips for configuring identical libraries under different names

As a Japanese web developer, I struggle with my English skills, so please bear with me. Currently, I am utilizing an npm library. I have forked the library and made some modifications to it. In order to incorporate these changes, I updated my package.js ...

javascripttypescriptnpm

Guidelines for sending data as an array of objects in React

Just starting out with React and I have a question about handling multi select form data. When I select multiple options in my form, I want to send it as an array of objects instead of an array of arrays of objects. Can anyone help me achieve this? import ...

javascriptarraysreactjsobject

Ways to retrieve an object initialized within a function

I'm sorry if my title is a bit confusing. I'm currently working on creating an object that contains key-value pairs of other objects. Below is the code snippet I'm testing in the Chrome console. When I try to create the object using the Cha ...

javascriptfunctionobjectreturn

Is there a way to efficiently add delimiters to an array using jquery dynamically?

Just joined this community and still figuring things out. I have a question - how can I use jQuery to dynamically add a delimiter like "|" after every 3 elements in an array? This way, I can explode the array and utilize the resulting arrays separately. He ...

javascriptjqueryarraysjavascript-objects