Troubleshooting problem with refreshing URL on "ionic serve" mode

After transitioning my project from Ionic 2 to Ionic 3, I've encountered an issue with ionic serve and the rebuilding process.

Initially, when I build the project, everything functions as expected. However, I've noticed that the URL in the browser's address bar suddenly changes to something like 

localhost:8100/#/home.page/tabs/t0/tab-0/feed.page
. This behavior was not present before; previously, it only displayed localhost:8100.

The structure of my app is such that there is a menu that alters the home.page section, along with a tab bar within home.page leading to the first tab, feed.page.

Concern 1: Prior to the migration, there were no changes in the URL while navigating within the application.

Concern 2: Following modifications in the code, Ionic CLI automatically rebuilds it. Despite expecting the same page to be displayed, only the feed.page is visible, with the parent menu of home.page mysteriously absent. Everything else vanishes outside the feed page.

What could be triggering this behavior, and how can I resolve it? It likely involves tweaking a configuration setting, but pinpointing the exact location has proven challenging.

typescriptionic-frameworkionic2ionic3

Answer №1

Finally, after extensive investigation, I have identified the root cause of the issue.

Scenario 1:

If you visit localhost:8100/ in your browser, the application will launch as expected.

Scenario 2:

If you visit 

localhost:8100/#/home.page/tabs/t0/tab-0/feed.page
, all related and lazy-loaded pages are loaded twice which ultimately leads to the menu malfunctioning.

What I have discovered so far:

  • I manually set this.nav.setRoot(HomePage) in the constructor of my app.
  • This caused all constructors to load twice instead of once.
  • This is why I encountered issues with the menu functionality.

What remains uncertain to me:

  • Why does the menu stop working when the page constructors are called twice?
  • How and why is the HomePage constructor being triggered based on the URL?

As a temporary solution, consider implementing the following:

By including this code snippet in the app's constructor, the HomePage will not be re-initialized if it has already been constructed:

if (this.nav.getActive() instanceof ViewController === false || this.nav.getActive().name !== "HomePage") {
    this.nav.setRoot("HomePage");
}

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

Accessing JSON data stored locally and initializing it into a TypeScript variable within a React application

I'm new to working with JSON arrays and I'm facing a challenge. I am looking for a way to load data from a JSON file into a Typescript variable so that I can perform a specific operation that involves arrays. However, I'm unsure of how to ac ...

jsonreactjstypescriptloopsio

Is it beneficial to utilize an interface for constructing a class model?

The Interface: export interface IAddEditGeneralDictionary { Code: string; StartDate?: Date | string; FinishDate?: Date | string; Name: string; } The Realization: export class AddEditGeneralDictionary implements IAddEditGe ...

typescripttypescript2.0

Issue found in React Js test - TypeError: source.on does not exist as a function

I'm encountering an issue with my post request using multipart/form-data. Everything runs smoothly, except for the tests which are failing. When running the tests, I encounter an error message: TypeError: source.on is not a function. This is the code ...

javascriptreactjstypescriptjestjsvitest

I require the ability to identify and capture the ID of the button (touchable opacity) that has been

When trying to delete a selected button by obtaining its specific id, I am facing an issue where after the first execution, the id of the deleted item is retained instead of the newly selected one. I am in need of a solution that allows me to retrieve the ...

reactjstypescriptreact-nativeexpo

Encountering a problem with error code -13 while trying to run the command `NPM install

Encountering errors while trying to install ionic (or any other software) using npm. The error message received during the installation process for ionic is provided below. Attempts have been made to uninstall and reinstall, however, the issue persists. ...

node.jscordovanpmionic-frameworkhybrid-mobile-app

Implement dynamic routerLink binding with Angular 11

Having a value containing routerLink and queryParams, I am attempting to bind it in the HTML. anchorValue : string = `<a [routerLink]="['../category/new ']" [queryParams]="{ query: 'category' }" routerLinkActive = ...

angulartypescriptangular8angular10angular11

Guide on Linking a Variable to $scope in Angular 2

Struggling to find up-to-date Angular 2 syntax is a challenge. So, how can we properly connect variables (whether simple or objects) in Angular now that the concept of controller $scope has evolved? import {Component} from '@angular/core' @Comp ...

javascriptangulartypescript

Navigating the syntax of React with Typescript - Feeling lost

As I embark on my journey with Typescript/React, I find myself trying to decode the meanings behind it all. Coming from a C# background, this new environment presents a unique challenge for me. Despite going through several tutorials, I still find myself p ...

reactjstypescript

Error occurs in Windows script while running a project installed globally

Upon installing my project globally, I encountered a Windows Script Host error. https://i.stack.imgur.com/unFVu.png What steps can I take to resolve this issue? The following is my JavaScript code snippet: Object.defineProperty(exports, "__esModule ...

javascriptnode.jswindowstypescriptnpm

``Can you provide guidance on excluding matching values from a dictionary object in a Angular project?

I've developed a function that takes a dictionary object and matches an array as shown below: const dict = { CheckAStatus: "PASS", CheckAHeading: "", CheckADetail: "", CheckBStatus: "FAIL", CheckBHeading: "Heading1", CheckCStatus: "FAIL", ...

javascriptnode.jsangulartypescriptdictionary

What is the process for attaching a function to an object?

Here is the complete code: export interface IButton { click: Function; settings?: IButtonSettings; } abstract class Button implements IButton { click() {} } class ButtonReset extends Button { super() } The component looks like this: expor ...

typescripttypescript2.0

Tips for isolating data on the current page:

Currently, I am using the igx-grid component. When retrieving all data in one call and filtering while on the 3rd page, it seems to search through the entire dataset and then automatically goes back to "Page 1". Is there a way to filter data only within th ...

javascriptangulartypescriptinfragisticsigx-grid

Experiencing CORS problem in Ionic 3 when accessing API on device

I am a newcomer to IONIC and I am utilizing a slim REST API with Ionic 3. Currently, I am encountering the following error: "Failed to load : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin&apos ...

phptypescriptapiionic-frameworkionic3

Retrieving Vue component properties as a data type

I'm facing a dilemma with my Vue components. I want to extract the props from one component and use them as a type instead of a value in another component. Specifically, I have a component where I need to take in an array of props from a different com ...

typescriptvue.jses6-modules

Steps for incorporating jQuery files into Angular 4

As a beginner in Angular 4, I am faced with the challenge of calling a jQuery function using an HTML tag from a method. The jQuery method is located in a separate file. How can I incorporate this into my Angular project? Here's an example: sample() { ...

jqueryangulartypescript

Using Typescript: Utilizing generic types within the parent class

I'm currently facing an issue with the code snippet below, which is a simplified example: class QueryArgs { studentId?: string; teacherId?: string; } class BaseValidator<T> { protected args: T; constructor(args: T) { this.args = a ...

typescripttypescript-generics

An issue arises in Slate.js when attempting to insert a new node within a specified region, triggering an error

A relevant code snippet: <Slate editor={editor} value={value} onChange={value => { setValue(value); const { selection } = editor; // if nothing is currently selected under the cursor if (select ...

javascriptreactjstypescriptslate.js

Within an Angular test scenario, execute a static method from a service that triggers an HTTP get request to fetch stored JSON data. This data is then retrieved and returned back to the service

Currently, I am facing a challenge in my Angular test case where I am trying to load JSON data via an HTTP call. The issue arises when a static method is called from a service spec file named "url-service.spec" to another service named "load-json.service. ...

javascriptangulartypescriptjasmine

Use Advanced Encryption Standard Algorithm (AES) to encrypt text with TypeScript and decrypt it using C# for enhanced security measures

Struggling with implementing encryption in TypeScript and decryption in C#. After searching online, I found some resources related to JavaScript, not TypeScript. Encrypt in JavaScript and decrypt in C# with AES algorithm Encrypt text using CryptoJS libra ...

c#securityangulartypescriptaes

Leveraging Shared and CoreModule in Ionic

In the recommended styleguide found at https://angular.io/guide/styleguide#core-feature-module, it is suggested to implement a SharedModule and CoreModule in an Angular application. I am curious if utilizing these modules would also be beneficial in an Io ...

angularionic-framework