The page has been updated following a refresh

I'm currently working on developing an Instagram-inspired platform using Angular 6, but I've run into a puzzling issue. When I refresh the page in my home component, everything reloads correctly and displays all my posts as expected. However, if I try to do the same on the profile page, it doesn't refresh the content; instead, it redirects me back to the home page without updating the profile section. https://example.com/DPO8g.jpg

Interestingly, after the initial refresh, everything works smoothly.

Profile View https://example.com/jHK5r.png

After the Refresh https://example.com/LHSHy.png

app.routes

import {Routes} from '@angular/router'
import { AcessoComponent } from './acesso/acesso.component';
import { HomeComponent } from './home/home.component';
import { AutenticacaoGuard } from './autenticacao-guard.service';
import { ProfileComponent } from './profile/profile.component';

export const ROUTES: Routes = [
    {path:'', component:AcessoComponent},
    { path: "home", component: HomeComponent, canActivate:[AutenticacaoGuard]},
    { path: "profile", component: ProfileComponent, canActivate:[AutenticacaoGuard]}
]

Profile.ts

export class ProfileComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

home.ts

export class HomeComponent implements OnInit {
  @ViewChild('publicacoes') public publicacoes:any;

  constructor() { }

  ngOnInit() {}

  public atualizarTimeLine(){
    this.publicacoes.atualizarTimeLine();
  }
}

Why might this unexpected behavior be occurring?

Answer №1

To start off, create a component called PageNotFound in case a user enters a random path,

Next, keep in mind that Angular starts matching the entered route from top to bottom, so the order of your ROUTES array is important,

Finally, consider updating your ROUTE array to:

export const ROUTES:Routes = [
  { path: "home", component: HomeComponent, canActivate:[AuthenticationGuard]},
  { path: "profile", component: ProfileComponent, canActivate[AuthenticationGuard]},
  { path: '',   redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent },
]; 

I also recommend utilizing Lazy Loading

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

Vue is encountering difficulties resolving the index.vue file located in the parent directory

Having trouble importing a component from the path folder, I keep encountering an error message stating "Cannot find module './components/layout/Navbar'. Vetur(2307)". This is how I am attempting to import the component: import Navbar from "./c ...

A comprehensive guide on constructing a literal object in Typescript by combining an array with an object

Recently, I came across this Typescript code snippet: type SortedList = T[] & {_brand: "sorted" }; function binarySearch<T>(xs: SortedList<T>, x: T): boolean let low = 0; let high = xs.length - 1; while (high ...

The observable HTTP map appears to be more of a representation rather than a concrete entity

I seem to be struggling with understanding Typescript I expected the returned observable to have a method getTitle(), but it seems to be missing. Instead, I am getting an object that resembles AttachableContentModel without that particular method. What is ...

What is the reason behind Typescript not narrowing generic union type components when they are eliminated by type guards?

Consider the following scenario where type definitions and function implementations are provided: interface WithNumber { foo: number; } interface WithString { bar: string; } type MyType = WithNumber | WithString; interface Parameter<C extends My ...

Angular 4 - The bindings are restricted from having assignments within them

Looking to include a CSS selector as an @Input in my component. To achieve this, I need to use the following syntax for passing a css selector: <mds-datetime-picker [inLine]="true" [targetSelector]='[data-name="target"]'></mds-datet ...

Step-by-step guide on incorporating an external library into Microsoft's Power BI developer tools and exporting it in PBIVIZ format

I'm attempting to create a unique visualization in PowerBI using pykcharts.js, but I'm running into issues importing my pykcharts.js file into the developer tool's console. I've tried including a CDN path like this: /// <reference p ...

What is the best way to ensure type safety in a Promise using Typescript?

It seems that Promises in Typescript can be type-unsafe. This simple example demonstrates that the resolve function accepts undefined, while Promise.then infers the argument to be non-undefined: function f() { return new Promise<number>((resolve) ...

Creating a Component with a flexible template: (Using transclusion and an inline template)

Trying to come up with a solution for creating a component that can work with dynamic template strings and access local variables within the template has proven to be quite challenging. No matter what approach I take, I always seem to struggle with getting ...

Differences between JSX.Element, ReactNode, and ReactElement: When should each be utilized?

Currently in the process of transitioning a React application to TypeScript. Everything seems to be going smoothly, however I've encountered an issue with the return types of my render functions, specifically within my functional components. In the p ...

Encountered a resource loading error while launching a Spring-Boot Application with an Angular 7 Frontend due to missing resources

tag, I am eager to construct a Spring-Boot-Application with an Angular frontend. Initially, I utilized the Spring-Boot-Initializer to establish a project and incorporated a RestController for /greet/world. Following that, in my src/main-folder, I initiate ...

Version 7.0.0 of Angular has not been properly set up on

Seeking guidance on installing angular version 7.0.0, I followed these steps: npm i -g @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adcec1c4ed9a839d839d">[email protected]</a> Unfortunately, an error ...

Strategies for preventing focus from shifting to tabbable elements within a chat component that has been minimized

There is a chat feature in my website that appears in a sidebar when the chat icon on the site header is clicked. To improve accessibility, I added tabindex = 0 to key elements such as the minimize and close icons on the chat container, as well as all th ...

The where clause in the Typeorm query builder instance is not functioning properly after its common usage

When fetching data for my relations, I opted to use QueryBuilder. In order to validate certain get request parameters before the index, I established a common QueryBuilder instance as shown below. // Common Get Query const result = await this.reserva ...

Setting the base path for npm tests: A step-by-step guide

I am currently working on a web application that utilizes Angular as the front-end technology and Java Spring Boot as the backend. https://i.sstatic.net/IWPNZ.png In the screenshot above, you can see that I have created a new directory within the root fo ...

I am interested in creating an input range slider using React and TypeScript

This code was used to create a slider functionality import { mainModule } from 'process'; import React, { useState } from 'react'; import styled from 'styled-components'; const DragScaleBar = () => { const [value, setV ...

Angular 12 experiencing CSS alignment issues

In my Angular component, I have the following CSS: .folders { border-left: 5px solid #b8744f; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; /*CORRECTION NEEDED ...

Creating a personalized design for MUI TextField spin button

Looking to customize the appearance of the up/down spin buttons in MUI TextField. https://i.sstatic.net/DcG66.png Desiring white arrows and a black surrounding area that's slightly larger, akin to this: https://i.sstatic.net/ZxMJw.png I'm aware ...

"Privileged" and "shared" within an Angular module

Without adding private before foo, loadBar, andtext, they are considered to be public by default in the component. export class RandomComponent { @Input() foo: string; @Output() loadBar = new EventEmitter(); text: string; } Is there any scenario whe ...

Looking to execute a service method within an authguard service?

I am a beginner with Angular and I am looking to invoke a service method within the authguard service. The specific service function that I need is as follows. Please note that I do not want to make any changes to this service function. loadOrganizations() ...

Minimize overlap across both projects

One scenario is having two projects that utilize a lot of the same components. How can we minimize redundancy between them? Is there a way to make them shareable? Perhaps leveraging webpack could be the solution? ...