A public channel for the Angular community to come talk about Scully and JAMStack strategies in Angular.
I am using MSAL.JS npm package for auth and it make some use of the window object; which gave Angular Universal some troubles. I was about to attempt to use the CDN version instead of the NPM version, and then try again. Would scully have the same issue I am facing with Angular Universal?
but what do people use after login?
Or is this just mainly for static sites without login
The content of my pages changes between logged in and not logged in.
If you have a logged-in version, I guess the whole idea is to not show certain things to everyone.
An JAMstack site makes everything public by default. While you can catch some things, you have to take in account that the HTML files with the content might be looked at outside of a browser.
An JAMstack site makes everything public by default. While you can catch some things, you have to take in account that the HTML files with the content might be looked at outside of a browser.
should I just go down the Angular SSR route then?
i would like ask experienced scullyio people about some experiences. We are using angular 9 as universal prerender, with strapi backend. however I'm C level and wondering why cms development takes too long. If I understand scullio has 2 roles once as prerenderer secondly as gatsby like plugine driven static site generator.
the question is can we make cms and frontend development more effective with sciullyio and write new plugins or it is soon about prerendering
@norbertbede Scully is about creating JAMstack for Angular, moving the rendering from the server, to build/deploy time. And yes, we have a good plugin-system that lets you do all kind of stuff. An example of that would be our markdown-render option.
Scully is indeed in a sweet-spot where it can make the integration between the app and the CMS work seamlessly. Scully will never be about prerendering alone.
Scully is indeed in a sweet-spot where it can make the integration between the app and the CMS work seamlessly. Scully will never be about prerendering alone.
3 replies
I'm seeing a weird issue where an error pops up with some posts that it can't find the
scully-contenttag, but then other posts work fine. They are all using the same rendering component. Thescully-contenttag is not in an*ngIf. Any ideas?
Turns out my HighlightService was causing the issue.
I am running into a weird problem while building on Netlify. If I build locally, my blog posts work perfectly. But when I do the build on Netlify the posts dont show up. I get this message in the build logs
Does anyone have experience using Netlify or something similar that might know what is going on?
@pjlamb12 Also, I'm going to add a way you can inspect and checnge the handledroutes array, before any other processing goes on.
2 replies
@blamb31 We have numerous projects on Netifly (well, I do not personally..) You can have a look here to see how its done.
Hi, i have an issue. I've made a router plugin as a library and i'm trying to build it. However, when I build the library I get the following error
Cannot find module 'express-serve-static-core'. This is coming from node_modules/@scullyio/scully/lib/utils/serverstuff/staticServer.d.ts:
with lines
scullyServer: import("express-serve-static-core").Express; and angularDistServer: import("express-serve-static-core").Express;
Can someone point me in the right direction in terms of google analytics info when using scully? What's the recommended way of doing this? I tried using this plugin but it seemed to add the script tag at the bottom of the page versus in the head element which didn't seem to work. Then I tried following google's docs adding the script snippet to the head section and that works but does not fire again when I click around the SPA nav links, which is confusing since I thought scully created static pages for all pages and figured the head section would fire every time I clicked to a new link within my SPA app.
Hi, I'm looking to use Scully to increase the performance of an in-house angular app that is being developed. Each page is fetched from a remote API that requires a token set in a header. How can I add this header in the ScullyConfig.routes configuration block?
Additionally, the content of the api changes frequently, and currently the static version takes about 25 minutes to generate when the api is local so network latency is minimal. Is there any way to parallelise this process to make it faster? I've not tested it with a bigger cpu yet, or more cores.
@dom38 - how are the tokens normally set? Is there a login process in Angular? Also, for (re)generation, if there is a way for you to determine which routes changed after an API change, you could consider doing incremental builds, so only regenerate the static pages that were changed. That is how I do it at least..
or when it's oauth2 you can also use a basic auth which is then part of the url and use this directly in your routes config
@MikeOne i just had some issues that when i add my gtm script to the index.html, and then angular kicks in the script was added twice (we're also dynamically adding a cookieconsent through gtm, which was also added twice then). my solution to fix this is to add the following at the top within your <body>
<!-- Google Tag Manager -->
<script data-cookieconsent="ignore">
(function (w, d, s, l, i) {
if (w && w['ScullyIO'] === 'running') {
return;
}
w[l] = w[l] || [];
w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXXXX');
</script>
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->and here's the final version of my i18n scully app => https://marketplace.staging.softgarden.io/en/
we just have to add some more date to our backend service which delivers all the data for the site. but frontend is finished
@dyingangel666 I’m not sure how your gtm script is added twice..? Are you adding it dynamically through angular instead of hardcoded in the head of index.html maybe? So in my setup I have GTM in the header, and then use the GTM History State Trigger to do Analytics virtual page views (detects angular route changes automatically). Works perfectly - also combined with Scully..
@MikeOne The page was added during the scully build for the first time... and then again when you visit the page, so bot, gtm script and cookieconsent was added twice.
@raidoninc_twitter Try using the transferState service. That will take care of a visible flash.
In case where there is too much data, we have a flash-prevention plugin that does some trickery to minimize the flash.
Sadly the flash is a result of the way Angular works, and we will not be able to work around it before angular supports dom-rehydartion without removing all existing DOM first.
In case where there is too much data, we have a flash-prevention plugin that does some trickery to minimize the flash.
Sadly the flash is a result of the way Angular works, and we will not be able to work around it before angular supports dom-rehydartion without removing all existing DOM first.
@dyingangel666 We have seen that with dynamically added scripts. Use isSculllyRunning to exclude them during the build, or sScullyGenrated to not add them twice during runtime.