theme not loaded after page refresh in development mode

[enterprisebug]

Hi,

after selecting e.g. the LIGHT-THEME on your published website the theme gets restored when refreshing the page. That is what is expected...

When cloning your rep the theme gets not restored in development mode after refreshing the page with F5.

I tried debugging for quite a while but couldn't find any solution.
Do you have a fix for that?

Thanks,
Daniel

[tomastrajan]

Hmm, interesting. Can you see theme configuration in local storage for lolcalgost when in dev mode? I only remember how to check it in Chrome, the dev tools application tab.

[tomastrajan]

I did some testing and it seems to be working in Chrome but not in Firefox and IE. Will look into why later...

[enterprisebug]

i have attached a screenshot for Chrome and IE11.

the setting gets stored but on initial load not restored.

even on settings page the stored theme gets not preselected.

i don't know if this is an issue of your repo but i am a fan of it because it shows a lot of great studd.

i tried reading: Initial State and Ahead of Time (AoT) Compilation but didn't get the clue.

[enterprisebug]

okay. just observed on your PROD site:

It is working if ANMS-AUTH key is present.

If you delete this key then it is not working.
That should be an easy fix now. I will check it later.

[enterprisebug]

@tomastrajan i thought it would be an easy fix. But actually i don't get it.
Do you have any other clue how to solve this?

[tomastrajan]

@enterprisebug yeah it should be related to the way we're initializing ngrx store on app startup, its looking for the keys per reducer / feature and probably this fails if the key (in our case ANMS-AUTH) is not present and probably the exception is swallowed silently. I am currently camping in Tasmania so not much internet or electricity is available but try checking / debugging local storage service in core module. Also, thank you very much for looking into this, I appretiate it a lot!

[tomastrajan]

So the problem is in the local storage service. This fails when the key is not found in local storage so we have to skip JSON parse in those cases.

[enterprisebug]

I was not able to find any swallowed exceptions...

Loading the initial state seems to work in my opinion:

export function getInitialState() {
    const initialState = LocalStorageService.loadInitialState();
    console.log(initialState);
    return initialState;
}

this loads the setting:

come back to a place where you have internet connection and electricity :-)

[enterprisebug]

strange. even after commenting the selectorAuth

ngOnInit(): void {
  this.store
    .select(selectorSettings)
    .pipe(
      takeUntil(this.unsubscribe$),
      map(({ theme }) => theme.toLowerCase())
    )
    .subscribe(theme => {
      console.log(theme); // writes to console: default-theme
      this.componentCssClass = theme;
      this.overlayContainer.getContainerElement().classList.add(theme);
    });
  // this.store
  //   .select(selectorAuth)
  //   .pipe(takeUntil(this.unsubscribe$))
  //   .subscribe(auth => (this.isAuthenticated = auth.isAuthenticated));

[tomastrajan]

Can you see theme class applied correctly in HTML like <anms-root class="<theme-name>-theme"> ?

[enterprisebug]

i am not authenticated.
i have deleted the ANMS-AUTH key from localstorage.
i have chose the BLACK-THEME.

this is loading the default-theme.
it produced the following HTML when loading the app:

yes, it produces the correct HTML if the ANMS-AUTH key is present:

it it just not loading correct theme if the ANMS-AUTH is not present.

[tomastrajan]

Ok I found out what the problem was. The initial state was retrieved correctly. Only auth reducer is available during init phase (other 2 are lazy loaded) so when we reduce initial state without auth key auth reducer gets triggered and generates new state with its initial state. This new generated state is different from original one so it replaces it effectively throwing away other state keys for reducers which were not yet loaded.

Solution is to load and merge initial state on both INIT and UPDATE (reducers) actions. UPDATE action is triggered when lazy loaded reducer is added to the application.

[enterprisebug]

@tomastrajan perfect! I'm really glad you found a solution!
Thanks man! I really appreciate it!