Hello, I understand that the problem persists when generating proxies for the second microservice.
To address this, please ensure you are passing the --target argument correctly for the specific project or library. The following command should work:
abp generate-proxy -t ng -url <apiUrl> -m <serviceName> --target <projectName>
Could you try this and let us know if the issue still occurs? If it does, please share any error messages or additional details so we can investigate further.
I see the issue you're facing. In the last step, tab-2 is not notified about the token update, which leads to the error. However, to assist you further, I would need more details on how the XSRF token is managed on the backend. Could you provide more information on that?
In fact, you just need to ensure that the refreshing page is aware that the antiforgery token has been updated before performing a location.assign('/') operation.
To handle this, you can use the ngx-cookie-service library to update the token properly. Here is a quick example of how you can implement this:
import { DOCUMENT } from '@angular/common';
import { Component, inject } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';
@Component({...})
export class AppComponent {
window = inject(DOCUMENT).defaultView;
cookieService = inject(CookieService);
antiforgeryToken = 'XSRF-TOKEN';
constructor() {
this.window.addEventListener('storage', (event) => {
if (event.key !== 'access_token') {
return;
}
const tokenRemoved = event.newValue === null;
const tokenAdded = event.oldValue === null && event.newValue !== null;
if (tokenRemoved || tokenAdded) {
const token = this.cookieService.get(this.antiforgeryToken);
//Added a set operation here
this.cookieService.set(this.antiforgeryToken, token);
location.assign('/');
}
});
}
}
Thank you for testing the approach and sharing your findings. The difference in behavior likely comes from how session persistence, token storage, or middleware logic is handled in your solution.
For the AntiForgery token issue, it seems the XSRF token isn’t refreshing properly when logging in from another tab. You might try:
storage event properly syncs authentication state.export class AppComponent {
window = inject(DOCUMENT).defaultView;
constructor() {
this.window.addEventListener('storage', event => {
if (event.key !== 'access_token') {
return;
}
const tokenRemoved = event.newValue === null;
const tokenAdded = event.oldValue === null && event.newValue !== null;
//You can re-fetch and update the XSRF token here
if (tokenRemoved || tokenAdded) {
location.assign('/');
}
});
}
}
Let me know if this helps or if you need further suggestions.
Hi again @improwise, I appreciate your follow-up.
We have run the necessary tests, and the projects generated from the current template do work as mobile apps. While we acknowledge the issue with Expo Web, we can confirm that this does not impact mobile functionality.
We will proceed with small fixes that do not disrupt the expected flow, ensuring a smooth experience. Once we have completed the necessary maintenance—including the aspects you mentioned—these updates will be included in the release notes.
Actually, the recommended fix should behave like this
Can you share the error details if you encounter something other than you mentioned at the beginning?
For the time being, we are not planning to host the fonts ourselves or switch to Google Fonts. However, as a temporary workaround, you can consider loading Inter from an alternative CDN or serving a local copy within your project to avoid issues with rsms.me. The exact fix will be published in the next patch version.
While a long-term approach should minimize dependencies on external font CDNs, for now, implementing a short-term fix like the below should help mitigate disruptions.
//app.module.ts
import { LPX_STYLE_FINAL } from '@volo/ngx-lepton-x.core';
@NgModule({
providers: [
...
{
provide: APP_INITIALIZER,
multi: true,
useFactory: () => {
const styles = inject(LPX_STYLE_FINAL);
return () => {
const index = styles.findIndex(f => f.bundleName === 'font-bundle');
if (index !== -1) {
styles.splice(index, 1);
}
};
},
},
],
...
})
export class AppModule {}
You can refer to Google fonts or add a query parameter for the inter.css in your styles.scss file.
// styles.scss
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
// @import url('https://rsms.me/inter/inter.css?v=1.0');
Another workaround can be replacing the font-bundle file in the angular.json
"architect": {
"options": {
"styles": [
...
{
"input": "../angular/src/font-bundle.css",
"inject": false,
"bundleName": "font-bundle"
},
...
],
},
},
}
/* font-bundle.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
/* @import url('https://rsms.me/inter/inter.css?v=1.0'); */
Hello, the latest updates done on our side should not cause such a problem. I was only able to duplicate the problem when I clear the cached data. It also works fine on other browsers including Safari.
However, if you think that this disrupts the functionality of your application, you can share a sample project through this email: sumeyye.kurtulus@volosoft.com and I can assist you further.
The LocalStorageListenerService is located inside the core library, but you can also take the same action in the app.component.ts
export class AppComponent {
window = inject(DOCUMENT).defaultView;
constructor() {
this.window.addEventListener('storage', event => {
if (event.key !== 'access_token') {
return;
}
const tokenRemoved = event.newValue === null;
const tokenAdded = event.oldValue === null && event.newValue !== null;
if (tokenRemoved || tokenAdded) {
location.assign('/');
}
});
}
}
You can follow the release notes that is announced here.
