server app instance not removed from DOM after client bootstraps app #111

Activity

1. a-syde commented on Jul 4, 2020

   

   a-syde

   on Jul 4, 2020

   More actions

   @mohamedaarab1994 Have you got any updates on this?
   Angular doesn't bootstrap client side at all, therefore there is no JS code at all. Only links work.
   Preboot works as it should when you run:
   "dev:ssr": "ng run frontend:serve-ssr"
   It is really frustrating 😞
   

   👍React with 👍1Reacted by samukym
2. akshata456 commented on Sep 2, 2020

   

   akshata456

   on Sep 2, 2020

   Last edited by akshata456

   More actions

   @CaerusKaru any update on this? I'm facing the same issue in angular 9
3. shyamal890 commented on Sep 10, 2020

   

   shyamal890

   on Sep 10, 2020

   More actions

   I am facing the same issue, can you please update us on this please.
4. ocombe commented on Sep 10, 2020

   

   ocombe

   on Sep 10, 2020

   More actions

   I had the same issue until I realized that appId and appRoot need to be the same:

   In my AppModule:

   BrowserModule.withServerTransition({ appId: 'app-root' }),
   PrebootModule.withConfig({ appRoot: 'app-root' })
   

   After that, everything worked like a charm.
5. akshata456 commented on Sep 11, 2020

   

   akshata456

   on Sep 11, 2020

   More actions

   I had the same issue until I realized that appId and appRoot need to be the same:

   In my AppModule:

   BrowserModule.withServerTransition({ appId: 'app-root' }),
   PrebootModule.withConfig({ appRoot: 'app-root' })
   

   After that, everything worked like a charm.

   It works for me .Thanks.
6. ocombe commented on Sep 21, 2020

   

   ocombe

   on Sep 21, 2020

   Last edited by ocombe

   More actions

   Ok another reason why this might fail: preboot uses the observable appRef.isStable, which might never get stable because according to the documentation:

   the application will never be stable if you start any kind of recurrent asynchronous task when the application starts (for example for a polling process, started with a setInterval, a setTimeout or using RxJS operators like interval);

   These asynchronous tasks can be in your code (setTimeout, setInterval, or interval operator), or in any of your external libraries... making it very hard to debug.

   A solution is to manually do the cleanup:

   • Inject EventReplayer in your code
   • call this.eventReplayer.replayAll();

   This will make the replay of events, and then the cleanup of the server side application. You will be responsible for making sure that your app is loaded, otherwise you'll see a nice FOC when it switches from one app to the other...
   If you're not replaying events, you can directly call this.eventReplayer.cleanup();

   To help you detect pending async events such as setInterval, you can use the following code in your main.ts file:

   document.addEventListener('DOMContentLoaded', () => {
     platformBrowserDynamic()
       .bootstrapModule(AppModule)
       .then(moduleInstance => {
         // Ensure Angular destroys itself on hot reloads.
         if (window['ngRef']) {
           window['ngRef'].destroy();
         }
         window['ngRef'] = moduleInstance;
         const ngZone = moduleInstance.injector.get(NgZone);
         setInterval(() => {
           const taskTrackingZone = (<any>ngZone)._inner.getZoneWith('TaskTrackingZone');
           if (!taskTrackingZone) {
             throw new Error(
               `'TaskTrackingZone' zone not found! Have you loaded 'node_modules/zone.js/dist/task-tracking.js'?`
             );
           }
           let tasks: any[] = taskTrackingZone._properties.TaskTrackingZone.getTasksFor('macroTask');
           tasks = clone(tasks);
           if (size(tasks) > 0) {
             console.log('ZONE pending tasks', tasks);
           }
         }, 1000);
         // Otherwise, log the boot error
       })
       .catch((error: string) => {
         /* tslint:disable-next-line */
         console.error(error);
       });
   });

   And add import 'zone.js/dist/task-tracking'; in your polyfill.ts file