"Troubleshooting a blank page issue in Angular UI Router caused by query string

I've been struggling with an issue related to query string parameters for quite some time. When I navigate to /, everything works perfectly fine. However, if I try something like /?anything, it simply doesn't work. These are the configurations in my two separate files:

var access = accessConfig.accessLevels;
$stateProvider.state('store', {
  abstract: true,
  templateUrl: 'store/main.html',
  data: {
    access: access.user
  }
});

$stateProvider.state('store.home', {
  url: '/?cart',
  views: {
    '': {
      templateUrl: 'store/home/home.html',
      controller: 'store.home as vm'
    }
  },
  data: {
    title: 'Home'
  }
});

Whenever I visit /, everything works as expected without any problems. However, if I attempt to go to /?cart or /?anything, I end up on a blank page. Even though I have a stateChangeStart event that is triggered when navigating to /, it is not being invoked when I navigate to /?anything.

Just to mention, I am utilizing html5mode(true). Any insights on what might be the issue here?

Interestingly, the functionality works when using ui-sref, but not when directly copying/pasting URLs into the address bar.

javascriptangularjsquery-stringangular-ui-router

Answer №1

In order to demonstrate the accuracy of this scenario and state definition, I have created a functional plunker. It clearly shows that as long as the cart parameter is provided with a value, everything works correctly.

The following examples will work successfully as we are passing the cart parameter:

<a ui-sref="store.home({cart:458})">
<a ui-sref="store.home({cart:'xyz'})">

Additionally, to accommodate the requirements of the plunker environment, the inclusion of <base href="" is necessary, as seen in the working code snippet:

<div ng-controller="appCtrl" >
  <a href="{{path}}?cart=abc">
  <a href="{{path}}?cart=123">
  ...

The variable path in this context refers to:

.controller('appCtrl', ['$scope',function($scope) {
    $scope.path = document.location.pathname;
}])

You can verify the functioning of these implementations here, ensuring that html5Mode is enabled

EXTEND

To further showcase that the functionality remains intact even when passing parameters through the address bar, a specialized plunker has been developed:

By navigating to the provided link, one can witness how the parameter /?cart=myTestParam is passed and displayed within the template via 

<pre>{{$stateParams | json}}</pre>
:

{
  "cart": "myTestParam"
}

Feel free to inspect the actual source code here

An essential component in the implementation involves the <head> section and proper configuration of html5 mode using the base element

with the correct setup for enabling html5 mode:

$locationProvider.html5Mode({enabled: true, requireBase: true});

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

Encountering a 404 error while using Node.js for app.get requests with Postgres as the

Currently, I am in the process of learning Node.js by following a tutorial that guides me on building a simple API. The tutorial utilizes a sample database for demonstration purposes, but I decided to use my own Postgres DB instead. However, when trying to ...

javascriptnode.jspostgresqlexpress

Mocha test failing to trigger function execution

I've been developing an Express.js application that includes a feature for creating appointments with a post request. This feature involves retrieving and saving data from a third-party API, followed by sending updated API data in the subsequent reque ...

javascriptexpressmocha.js

JavaScript Polling Based on Time

I am currently working on developing an alarm clock feature using the Date() object. My aim is to have a function trigger when the time from the date object matches the time set by the user. Users set their alarms by selecting a specific time, but I' ...

javascripthtmltimer

Alert from Webpack regarding a critical dependency in the view.js file of the Express library located in the node_modules directory: an expression is being used

Currently, I'm in the process of working on my inaugural full stack application (a simplistic notepad app) and while bundling webpack, I've encountered an issue that is a cause for concern: WARNING in ./node_modules/express/lib/view.js 81:13-2 ...

javascriptnode.jsmongodbexpresswebpack

The node server is experiencing difficulties connecting to the mysql database, resulting in a timed out connection error at Connection._handleConnectTimeout

Having trouble establishing a connection with the mysql database. Every time I attempt to start the node server, it keeps throwing a database connection error. The specific error message is as follows: connect ETIMEDOUT at Connection._handleConnectTimeou ...

javascriptmysqlnode.js

What's preventing me from invoking this object's function through an inline anchor?

CSS: <div class="box"> <p>This is a box</p> </div> Javascript: var box = { content : (function() {return ("This is the content of the box")}) }; alert("Box content: \n" + box.content()); $("output").text( +"<br/ ...

javascripthtmlcssjsfiddle

The concept of circular dependencies in ES6 JavaScript regarding require statements

After transferring a significant amount of data onto the UI and representing them as classes, I encountered some challenges with managing references between these classes. To prevent confusing pointers, I decided to limit references to the data classes to ...

javascriptnode.jswebpackes6-class

Changing the className of buttons based on user interaction

I'm looking to create a function in React JS that changes the button's color when clicked. Specifically, I want the color of the button to change upon clicking. I have attempted to achieve this using the following code: {"classname" i ...

javascriptreactjs

webstorm error: unresolved function or method when using npm azure-storage modules

Encountering a problem with WebStorm IDE when using azure-storage library as it is unable to find the correct methods for intelligent coding (although the code runs without errors). View image of unresolved function or method Appreciate any help you can ...

javascriptnode.jsazurenpmwebstorm

Switch between active tabs (Typescript)

I am working with an array of tabs and here is the code snippet: const navTabs: ITab[] = [ { Name: allTab, Icon: 'gs-all', Selected: true }, { Name: sources.corporateResources, Icon: 'gs-resources', Selected: false }, { Name ...

javascriptangulartypescript

Angular Universal causing issues with updating the DOM component

@Component({ selector: 'mh-feature-popup', template: ` <div class="full"> <div> <div class="container-fluid" [@featurepop]="state"> <div class="row"> <div class="col-xs-12 col-md-4 col-md-offse ...

javascriptangulartypescriptangular-universal

Regular expression designed to validate a 19 digit MasterCard number

I need assistance with adjusting the regex pattern for Mastercard to support both 19 digit and 16 digit cards. Can someone please provide guidance on how to modify it? masterCardPattern: /^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0- ...

javascriptangularjsregex

"Creating a dynamic TreeList in Ignite UI by linking pairs of names and corresponding

I recently developed a drag and drop tree list inspired by the tutorial on IgniteUI website. The main tree list functions properly, but I encountered an issue with the child nodes displaying as undefined, as illustrated in the image below: This is my Type ...

javascriptangulartypescriptignite-uiigtree

Which is better for creating contour graphs: JavaScript or PHP?

I need to create a scientific graph for a web application that displays temperature data based on time and depth coordinates. You can view an example here : I have time and depth coordinates, and I want to represent temperature using color in the graph, ...

phpjavascriptgraphvector-graphics

Guidance on incorporating a function as a prop in React using TypeScript

I'm currently learning TypeScript with React and ran into an issue. I attempted to pass a function as a property from my App component to a child component named DataForm. However, I encountered the following error: Type '(f: any) => any&ap ...

javascriptreactjstypescript

Invoking a directive function with a return value from a controller

I am working on a directive that contains a form with a simple input. I have multiple instances of this directive on the same page (index.html). Outside of these directives, there is a button that, when clicked, should gather data from all the inputs withi ...

javascriptangularjsangularjs-directive

Ensure that data is not cached after the page is refreshed at regular intervals of x seconds

In the process of developing a news app, I have implemented a feature where a div with the class .new_feed is refreshed every 10 seconds to fetch new updates. However, I encountered an issue where if a new feed appears in the .new_feed div and is not cli ...

javascriptjqueryhtmlajax

The Application Insights Javascript trackException function is giving an error message that states: "Method Failed: 'Unknown'"

I've been testing out AppInsights and implementing the code below: (Encountering a 500 error on fetch) private callMethod(): void { this._callMethodInternal(); } private async _callMethodInternal(): Promise<void> { try { await fetch("h ...

javascripttypescriptazure-application-insights

Programmatically link an Angular JS model to a template using binding

When given an HTML template like the following: <div class="info"> <div class="title"><a href="property-detail.html">{{title}}</a></div> <div class="location">{{location}}</div> <div class="property ...

javascriptangularjs

Compel the browser to initiate a reflow by adjusting the CSS

I am currently in the process of building a responsive image slider without relying on jQuery, using CSS3 transitions. The setup is quite simple: there's a viewport with a UL inside, containing relatively positioned LIs that are left floated. Howeve ...

javascripthtmlcssreflow