Protractor - Angular Goes out of sync for feature modules

I am trying to run angular e2e tests using protractor.

Here is my angular project looks like:

Angular Project

• Main module

  • HR module (Feature module)
  • Register Module (Feature module)

For my e2e tests they are running fine if I try to execute tests on main module, but for the feature modules it goes out of sync.

The error I am receiving is - Angular is not defined. and some times element is not visible within specified timeout

Spec code:

describe('Page name', () => {

    it('should be able to load page', async () => {
      
        navigateToPage('hr/csvimport');
       
        browser.waitForAngular();
       
        const settingsName = generateRandomNumber();
       
        let btnAdd = element(by.id('btnAdd'));
        await btnAdd.click();
        //expect condition
   });
});

Navigate to page code:

export const navigateToPage = async (path) => {
    console.log('set location ' + path);
    if (path === '/' || path === '') {
        await browser.get('/');
    } else {
        await browser.waitForAngular().then(() => {
            browser.get('/' + path);
        });    
    }    
};

My best guess is that because of the feature module having different script loading it some how goes out of sync with angular. currently its frozen on click only and tests stops.

Question: how to make it sync with the angular?

lets start 1 by 1

navigateToPage and waitForAngular return promises. A promise needs to be resolved. So when you call them use await

Let me know what you're seeing