I have an Angular 6 application which uses OAM authentication cookie to communicate with back-end web services. OAM sessions are set to expire after X minutes or when the same user has logged in from another device. I want to handle this and display a popup window to the users so that they can click and navigate them to the Login page. I have created an HttpInterceptor and call a service to display the popup window.
When I deploy the application (build it using ng build and production mode configurations) it works fine whenever the session expires and the next user action is to navigate to a path which does not have a route resolver defined in the routing module, i.e. services are called within the component after initialization. Whenever I try to navigate to a path which needs a resolver to be called first nothing happens. I tried adding console logs and redeployed several times to see what could be wrong but the resolver as well as the interceptor are not even called. I just get the following errors in the Console tab and no navigation takes place:
Uncaught SyntaxError: Unexpected token < at https://login...?bmctx=920634F2F55...e9b2.js
Error: Loading chunk 21 failed...
From what I understand, the 1st error is because it's trying to parse the response of the request (which is from OAM's automatic redirection to the login page) and the < character is the beginning of <!DOCTYPE html>. By the way, this is the same response which returns error code 200 and which I check in my interceptor in order to display the pop-up window.
The weird thing is that this does not happen when I run the application in debug mode (using ng serve command). The interceptor is invoked correctly and in all cases! Could it be something related to my build configurations or am I missing something related to OAM timeout handling?
See below some sections of my code:
@Injectable()
export class ResponseInterceptor implements HttpInterceptor {
constructor(private alertMessageService: AlertMessagesService) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).pipe(catchError((error: any, caught: Observable<HttpEvent<any>>) => {
if ((error.status === 200 || error.status === 0) && error.url.indexOf('login.') !== -1) {
this.alertMessageService.displayLogoutConfirmation();
return of(error);
}
throw error;
}));
}
}
Deployment build configurations in angular.json:
"configurations": {
"dev1": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/./environments/environment.ts",
"with": "src/./environments/environment.prodpro.ts"
}
]
},