Preboot is not working with `app-shell` (pre-rendering)

[NgxDev]

I'm submitting a ...

• bug report

Which parts of preboot are affected by this issue?

• client side (Application Shell)

What is the current behavior?

When building an app shell, the preboot script present in that pre-rendered document causes undesired behavior:

• While the client app bootstraps (no PWA), preboot doesn't capture events (or, if it does, it doesn't replay them after the client app bootstraps); The first obvious thing that can be noticed is that pressing of a button before the client app bootstraps doesn't trigger the preboot overlay.
• Sometimes (while emulating a Slow 3G connection), Preboot doesn't make the switch to the client app (easily noticeable in the example repo, since the header brand and menu button don't get some styles applied in the server rendered view - material 5.2.x bug)
• Even after the client app bootstraps, the pressing of a button (like the menu button in the example repo) triggers the preboot overlay;

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

https://github.com/MrCroft/ng-app-shell-preboot
Just npm install, npm run build:ssr & npm run serve:ssr

What is the expected behavior?

1. Preboot should still work when using an App Shell (no PWA).
2. Not sure what should happen in case of a PWA, when the app shell is served by the Service Worker. How would Preboot know which scenario is the current one?

What is the motivation / use case for changing the behavior?

SSR and PWA are not mutually exclusive. We still need SSR for SEO and first load of the app. The Service Worker needs a document to cache (ideally, a document with the main layout present - like header/navigation/footer).
Initially I thought that the preboot script should not even be present in the prerendered app shell document, but when thinking about it: one might use an App Shell and not use SSR. Or, in case of a PWA - you still want both.

Please tell us about your environment:

Preboot: 6.0.0-beta.2
Angular: 5.2.5
Angular CLI: 1.7.0
Node: 8.9.4
OS: All

[CaerusKaru]

I'm unable to replicate this with the example repo provided. When I run it on Slow 3G, I can press the button to trigger the overlay, which then disappears when the client bootstraps.

The only issue I have is that the button doesn't seem to trigger the sidenav after bootstrapping (though it doesn't create an overlay either, so it doesn't seem like a preboot issue to me).

I'll leave this open for now in the event that you can provide instructions that actually produce the issue.

[NgxDev]

I think the main issue might be the fact that it doesn't make the switch between the server rendered view and the client, after the client bootstraps.
In my case, first time I access it after opening a new tab (or when doing a hard reload) it doesn't make the switch, after the client app bootstraps. After I was changing to "Slow 3G" I was doing a hard reload, so network emulation had nothing to do with it, it turns out.
But, I have no idea why it doesn't make the switch when I do a hard reload.
And also, why (on the client app) the preboot overlay keeps being triggered each time I press the menu button. If I manually switch the server-rendered view with the client view, then everything is fine and no preboot overlay is present.
I'm not sure:

1. why do I have the overlay present in the client view (and getting triggered), if I do a normal refresh... and
2. why doesn't it make the switch from the server view to the client view if, I do a hard refresh.

[NgxDev]

@CaerusKaru Ok, I don't know how I missed this the first time:
Taking a closer look at the source, I see that the preboot script is present twice.
Once because it's already present in the app shell (in the pre-rendered index.html) and a second time because I assume it gets injected again when the app is rendered server-side, using the very same index.html file.
I'm not sure how could I generate the app shell to not have the preboot script, and only have it when rendering the app server-side (I assume it is possible without too much trouble).

But I guess it would be a nice feature if preboot would use an id or mark somehow that script tag, and not inject it again if already present.
In some cases we'd want preboot present in the app shell (if we're not also doing server-side rendering, and just use a static server), and in other cases we wouldn't (if we're talking PWA, it doesn't make sense, sure)

[CaerusKaru]

@MrCroft I've added a check in #77 to fix this. Can you build from source and confirm that it works?

[NgxDev]

@CaerusKaru Almost. I see the id="preboot-inline-script" added to the script tag, but the tag is still present twice. Looking closer, I think that

const existingScripts = doc.querySelectorAll(PREBOOT_SCRIPT_ID);

should become

const existingScripts = doc.querySelectorAll(`[id="${PREBOOT_SCRIPT_ID}"]`);
// OR
const existingScripts = doc.querySelectorAll(`#${PREBOOT_SCRIPT_ID}`);

Tested with the above change and it's working.

EDIT: Sorry for the delay, either npm link has issues on Windows or I don't know how to use it properly (I needed to run the build myself and link to the dist/releases folder).

[CaerusKaru]

@MrCroft Excellent, I've updated the PR to reflect this, can you pull again just to be sure?

PS I hate npm link too. I usually just run npm pack on the dist folder and install from the file directly.

[NgxDev]

@CaerusKaru Yup, all good! Thank you!