navCtrl.getActive().component.name Returns Single Letter for Production Build

I would like to share a problem we faced and how we resolved it.

Problem statement:

Client reported that every time they launched the application the login screen which was the first screen after splash popped up twice. It occurred in later versions, not in the earlier versions.

How we identified what might be creating the problem:

1. In the token interceptor file we were checking the error that whenever a 401 error occurs and the active screen is not 'login' then it should be navigated to login screen which was absolutely fine.
2. On every relaunch of application, there were 2 API’s being hit.
3. So, we assumed that this could be the issue. But checking the code all looked fine.
4. We added console.log to check the activeComponent.name
5. This was surprising, the log displayed a single letter ‘q’. 
6. So when 2 API’s were hitting, and the authorisation failed, the code written in the error block was called twice, and since the name of the active component was ‘q’, the if condition passed, and it popped to login twice.

Snippet of code:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 	
	...   
	...

        return next.handle(request).do((event: HttpEvent<any>) => {
            
        }, (err: any) => {
            let activeComponent = this.nav.getActive()
            if( err.status == '401' && activeComponent.name !== 'login'
            ) {
		...
                this.nav.popTo(login,{animate:true,animation:'transition',duration:500,direction:'back'})
		...
            }
        });
    }

Why it was giving a single letter for component name:

1. Whenever we build the application with command ionic cordova build ios --prod, the compiler creates a minified version of js, where it replaces all the names of the component with single letters.

How to resolve it?

1. Use component objects reference to match with the component. Check the code below, either of the two statements will work. Either match it with “==“ sign or “instanceof”.

if(this.nav.getActive() instanceof login) {}
if(this.nav.getActive().component !== login) {}

Difference in —aot build and --prod build

• The size of the builds is different. Using prod flag it creates a smaller build than created by aot

Summary line:

• We should never ever use activeComponent.name to check the active component, rather check the solution in "How to resolve it?" section

References:

https://github.com/ionic-team/ionic/issues/8512