Active Query Builder support area

How to configure AQB.Web.virtualDirectory in Angular project.

Rajib Enlightsolutions

3 years ago
updated 3 years ago
Answered

Using professional edition of Active Query Builder v3.8.

I am trying to integrate AQB with angular project.

My angular project is running on seperate host i.e. localhost:4200 and AQB project is running seperate ASP.NET Core project https://localhost:6001

When we have run the angular project got few errors and AQB not loaded in browser.

Here I need to change the URL to https://localhost:6001/ActiveQueryBuilder/Handler/resources/strings/Auto(with https protocol) instead of using http://localhost:4200/ActiveQueryBuilder/Handler/resources/strings/Auto this link.

For this I have added AQB.Web.virtualDirectory to '/localhost:6001'.

After added virtual directory system auto generates link with http protocol. Its not working for me, as for my server side project its https protocol.

I need this link with https protocol. Could you please tell me how can I manage correct Handler link from client side on my angular project? also do I need to anything on server side?

AQB.Web.UI.QueryBuilder( qbId, // instance identifier $('#qb'), // id or path to HTML DOM element { reinitUrl: // path to the session reinitialization method '/QueryBuilder/CreateQueryBuilder' } );

Replies 7

Oldest first
Newest first Oldest first

Andrey Zavyalov, PM

3 years ago

Hello, sir.

You should use the `AQB.Web.host` instead of virtualDirectory and assign the "https://localhost:6001" value to it.

Chances are you get the CORS error after that. Please refer to this article to fix it: How to enable CORS in .NET Core or Framework when AQB service is on a different host/port than the webserver?

Reply Link

Thanks Sergey for the quick response.

We have used AQB.Web.host and assign the host value. It works but now we are getting the different error.

"Session has expired."- could you please tell me why I am facing this error from angular end? and what would be the solution?

Hello,

First, please verify that your AQB.Web.UI.QueryBuilder constructor has the reinitUrl parameter defined as follows:

Next, make sure that the instance identifier is the same on server and client.

If everything is okay, please submit a private ticket and send a test project or pieces of client and server code from it for investigation.

Few more comments on the "Session has expired" issue. This error actually means that a client request to the QueryBuilder server instance failed because a proper instance was not found on the server. The point is that in the current version, a server instance must be initialized before a client can communicate with it.

In the case of a classic WebForms, MVC, or even a client-side rendering application hosted on a single server, an instance is created automatically on page load. In a loosely coupled environment, when static HTML content is returned separately, a client must send a request to the server to initialize a QueryBuilder instance on the server.

The error message is not clear enough because the same situation may arise due to the session's expiration. So we've added the reinitUrl parameter to handle the session expiration issue.

So the first thing you should check on getting this error is that the QueryBuilder instance is actually created on the server. BTW, this may happen due to the CORS misconfiguration if you host your application server on a different host.

Thanks Sergey for your response.

I have assigned the reinitUrl in AQB.Web.UI.QueryBuilder constructor. But if I am trying to access on angular queryBuilder component I have faced the error- 'Session reinitialization failed. Please ensure that (a) QueryBuilder instance on the server is successrully created with the given InstanceId, and (b) the same InstanceId is used to create AQB layout suits and passed to the startApplication method."

I did not understood where I made the mistake for that and what will be resolution for this issue. Please help me there. Thanks.

Hello, Rajib.

"So the first thing you should check on getting this error is that the QueryBuilder instance is actually created on the server."

What it means is that you should literally, if it's possible to debug this, put a breakpoint in the server QueryBuilder initialization code and make sure that the component instance with the "Angular" instanceId is really created (and no exceptions are raised during this process) on the server. If it's not possible to debug, put a marker of some kind (save the log file).

The fine point is the InstanceId name. It must be the same as the "name" variable value in the client code ("Angular").

This error may happen due to the CORS misconfiguration. If you host your application server on a different host, please check your JavaScript console for CORS errors.

3 years ago
Answered