angular hybrid app, lazy loaded module does not work when page refreshed

Question

I have an angular hybrid app (angularjs with angular) with lazy loading on one of the feature modules.

The feature module is declared the following way

const contactFs: NgHybridStateDeclaration = {
    name: 'contact.v2.**',
    url: '/contact/v2/',
    loadChildren: () =>
        import(/* webpackChunkName: "contactM" */ './contacts.module').then(m => m.contactsModule)
};

I have the following states declared in the contacts module

export const state1: Ng2StateDeclaration = {
    name: 'contact.v2',
    url: '/'
};

export const state2: Ng2StateDeclaration = {
    name: 'contact.v2.details',
    url: ':id/details',
    component: detailsComponent,
};

Now I can navigate to the contact.v2.details state without a problem from the home component. The url becomes something like host/contact/v2/9ee34d65-a91f-460c-9947-e2a7ee9d5538/details

The problem is that when the user clicks the refresh on the browser, it does not load the component, it just loads an empty state. Not sure what is going wrong here, it seems like it is not loading the lazy loaded module at all when hitting the refresh button.

was this problem solved ? – Sachin Gupta Nov 17 '20 at 04:57 — Sachin Gupta, Nov 17 '20 at 04:57
`` should solve the problem – Pankaj Parkar Nov 23 '20 at 07:09 — Pankaj Parkar, Nov 23 '20 at 07:09

score 0 · Answer 1 · answered Jul 13 '20 at 08:51

0

Change in your index.html as below.

<base href='./'>

answered Jul 13 '20 at 08:51

surendra kumar

1,686
11
15

score 0 · Answer 2 · answered Nov 23 '20 at 14:50

the problem is when you refresh you don't have the data (in your first call you pass the data to the detail components but when you refresh the data are not in it) you need to use rxjs and do the call on the onInit method (i say this because i am writing same project as you using drupal 8.9)

angular hybrid app, lazy loaded module does not work when page refreshed

2 Answers2