## Where communities thrive

• Join over 1.5M+ people
• Join over 100K+ communities
• Free without limits
##### Activity
Nick Hodges
@NickHodges

I'm getting the following error when trying to install scully in a brand new angular app:

√ Packages successfully installed.
? Which route renderer would you like to use? Scully platform server
C:\NickProjects\personalwebsite\frontend\node_modules\@angular-devkit\core\src\logger\indent.js:35
entry.message = indentMap[l] + entry.message.split(/\n/).join('\n' + indentMap[l]);
^

TypeError: entry.message.split is not a function
at MapSubscriber.project (C:\NickProjects\personalwebsite\frontend\node_modules\@angular-devkit\core\src\logger\indent.js:35:58)
at MapSubscriber._next (C:\NickProjects\personalwebsite\frontend\node_modules\@angular-devkit\core\node_modules\rxjs\internal\operators\map.js:49:35)
at MapSubscriber.Subscriber.next (C:\NickProjects\personalwebsite\frontend\node_modules\@angular-devkit\core\node_modules\rxjs\internal\Subscriber.js:66:18)
at Subject.next (C:\NickProjects\personalwebsite\frontend\node_modules\@angular-devkit\core\node_modules\rxjs\internal\Subject.js:60:25)
at IndentLogger.log (C:\NickProjects\personalwebsite\frontend\node_modules\@angular-devkit\core\src\logger\logger.js:83:23)
at IndentLogger.error (C:\NickProjects\personalwebsite\frontend\node_modules\@angular-devkit\core\src\logger\logger.js:98:21)
at MergeMapSubscriber.project (C:\NickProjects\personalwebsite\frontend\node_modules\@angular-devkit\schematics\src\rules\call.js:75:24)
at MergeMapSubscriber._tryNext (C:\NickProjects\personalwebsite\frontend\node_modules\@angular-devkit\schematics\node_modules\rxjs\internal\operators\mergeMap.js:67:27)
at MergeMapSubscriber._next (C:\NickProjects\personalwebsite\frontend\node_modules\@angular-devkit\schematics\node_modules\rxjs\internal\operators\mergeMap.js:57:18)

2 replies
I used the following command line: ng add @scullyio/init@latest
Angular version is 14.0.3 (Would that be the problem...?)
OlegSuncrown
@OlegSuncrown

About angular 14, I couldn't also get generated scully config or set up it myself, so switched back one commit before I installed scully, then I deleted modules and installed them again and after this I tried

npx ng add @scullyio/init --project blog
OlegSuncrown
@OlegSuncrown

UPD: It generated config but I was using regular modules not standalone components, but still

x Could not find project "undefined" in 'angular.json'.

To make scully work with Angular 14, you can rename
scully.blog.config.ts
to
scully.undefined.config.ts
or run
npx scully --project blog

@mhamri
@OlegSuncrown does yours generate the routes? when I checked static folder, there is only one index file and no folder for other routes.
OlegSuncrown
@OlegSuncrown

@OlegSuncrown does yours generate the routes? when I checked static folder, there is only one index file and no folder for other routes.

It does generate, everything looks ok, but it doesn't work with standalone components.

OlegSuncrown
@OlegSuncrown
Another possible way to add scully to angular 14:
"@scullyio/init": "^2.1.36",
"@scullyio/ng-lib": "^2.1.0",
"@scullyio/scully": "^2.1.0",
"@scullyio/scully-plugin-puppeteer": "^2.1.0",
2. npm i
3. Create file scully.blog.config.ts
4. Add this to .gitignore
scully.log
scullyStats.json
.scully
/scully/**/*.js
/scully/**/*.js.map
/scully/**/*.d.ts
7. Add this to package.json in the scripts:
"scully": "scully",
"scully:serve": "scully serve"
@mhamri
oh you are using blog template. if not blog template normal path are not discovered out of the box, I have a little repo for that https://github.com/mhamri/scully-route-bug
OlegSuncrown
@OlegSuncrown

oh you are using blog template. if not blog template normal path are not discovered out of the box, I have a little repo for that https://github.com/mhamri/scully-route-bug

Sorry, I just named my project like blog, it's using JSONPlaceholder for test
Ok, I created test repo, you can check it and tell if I missed something https://github.com/OlegSuncrown/scully-test

Sander Elias
@SanderElias
@here, Sorry, I'm currently ramping up on a new project. I still need a couple of day;s and that I will check into the problems there are with 14 and NX, and also into your problem @OlegSuncrown
@mhamri
@SanderElias great, new project sound exciting. hope it goes smooth. for time being I moved to use angular 12 and scully v1 by using this template.
https://github.com/KittyPingu/scully-template-project
gabriel
@gfsd3v

Hello guys, hope everyone is doing well.

I've a question, is normal when running npx scully serve that the static generated routes always returns a 301? I'm doing some performance benchmarks for my project so I dont have a pipeline setup to see how this would behave on my server, but I noticed that running the scully serve the server always returns 301 for the dynamic generated routes, on slower 3g connection this redirect costs from 2 to 3 secs

Sander Elias
@SanderElias
@gfsd3v That is how jamstack works. On some servers, you can configure this behavior. We didn't do this for the dev server, as it is just a tool to check out the thing locally.
It is not something that Scully can fix! (you can fix static links in the generated files, we have a SEOhref plugin for that)
gabriel
@gfsd3v
@SanderElias thanks for the quick answer, I'll check it how to handle it on my server. but I'm not so sure if I follow the last "static links on generated files" part, from what I saw SEOhref plugin is on the core plugins list, does it work by default or I need to setup something to handle this plugin?
Sander Elias
@SanderElias
You need to add it to youe defaultPostRenderers array. (and include it it the ones where you are reassigning it)
OlegSuncrown
@OlegSuncrown
@SanderElias thanks a lot for your help.
This all work like a magic ))). Maybe someone can explain or share with some more info,
when I am adding :slug during the build, so I am doing http call, and I can add that data and use it later with scullyRoutesService.getCurrent(), so what the point to use TransferStateService or duplicate http call with Angular service, if we did it and can reuse fetched data?
Sander Elias
@SanderElias
I'm not sure what you are asking, can you rephrase your question?
OlegSuncrown
@OlegSuncrown

I'm not sure what you are asking, can you rephrase your question?

Sorry for my bad English, so when I build my app - scully makes http call to get :id for example if I have route blog/:id, I have my custom plugin what returns this:

return data.results.map((item: any) => {
return {
route: /blog/${item.id}, data: item }; )) So in my item.component.ts I can just do this item$ = this.scullyRoutesService.getCurrent();

but as usual I see people do:

item\$ = this.apiService.getItem(id);

I don't understand what is the point to do another http call inside my component if I have already my data in the this.scullyRoutesService.getCurrent()

Fernando Romero
@patotter
Hi! Anyone knows a nice clean way to know when the flash-prevention plugin is done and already put it's loaded class on the <body>? Thank you very much! :)
Sander Elias
@SanderElias
@OlegSuncrown Ah!, now I see what you mean. No there is no reason for calling an API, when you can get it from the routeData.
But some people don't know/understand.
Also, when you are calling an API to data that rarely gets updated, you can use the SculltTransferServicce to embed it it the pages HTML
@patotter You can listen for the event FlashPreventionSwitchDone on windows.
Fernando Romero
@patotter
Thanks @SanderElias!
OlegSuncrown
@OlegSuncrown

@OlegSuncrown Ah!, now I see what you mean. No there is no reason for calling an API, when you can get it from the routeData.
But some people don't know/understand.
Also, when you are calling an API to data that rarely gets updated, you can use the SculltTransferServicce to embed it it the pages HTML

Thank you very much for answer, because I am using api what cause CORS, so if I am doing data fetch in my component it still produce that CORS error, but with my custom plugin it's actually can get that data.

1. Is SculltTransferService doing fetch during build?
2. If I have that CORS problem, is it possible somehow get data with using SculltTransferService, I tried and it didn't work for me, but still want to be sure, maybe I missed something?
Sander Elias
@SanderElias
1. yes
2. It runs in the browser, so your due to cors.
if you own/adminster the server, you need to set the proper CORS headers there., otherwise you might need to use a nodejs proxy to fetch that data during build.
griffinguy
@griffinguy:matrix.org
[m]
Please I'm not really clear on redirection and trailing slash.
should I add trailing slash in my routes to stop the redirect?
Sander Elias
@SanderElias
@griffinguy:matrix.org Well, sort of yes. However, angular will remove those when it puts them in the HREF attribute. We have an seohref plugin that will put them back where they need to be.
3 replies
MikePiper
@MikePiper

Hello,

After updating Angular recently, I am starting to have an error.

The following command used to work:
npm run scully -- --scanRoutes

Now when I run it, I get the following error message:

  ⚠
=====================================================================================================
The config file should have a name that is formated as:
scully.<projectName>.config.ts
where <projectName> is the name of the project as defined in the 'angular.json' file
If you meant to build a different project as undefined you can use:
--project differentProjectName as a cmd line option

When you are in a mixed mono-repo you might need to use the --pjFirst flag.
which will look for package.json instead of angular.json to find the 'root' of the project.
=====================================================================================================

x Could not find project "undefined" in 'angular.json'.

My project name is "open-social-security", and the "./scully.open-social-security-config.ts" file still exists as it did prior to updating.

I am unsure what it means to build a project "as undefined" or whether I should be doing that. Any suggestions for how to proceed?

^Sorry if this is a dumb question. This is the only project I have as a developer and I often struggle with updates and dependencies and so on.
Sander Elias
@SanderElias
use the --project open-social-security flag on your cmd line. (you can add it to your project.json, and heve it taken care of in there..
MikePiper
@MikePiper
@SanderElias Thank you! Everything is working now. I appreciate your assistance.
Charles Keatley
@cjkeatley
Hi. I'm having trouble with the criticalCSS plugin. When building, I receive this message for each route as it's being rendered: could not inline CSS TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Buffer
IvanColucciSW
@IvanColucciSW

Hello everyone, sorry if this is a repost, but I could have my configuration properly working following the old posts. I am trying to define a custom router Plugin for scully and following the documentation (https://scully.io/docs/Reference/plugins/types/router/#type-routestypes), I achieved this configuration:
---scully.config.ts

import { ScullyConfig } from '@scullyio/scully';

/** this loads the default render plugin, remove when switching to something else. */
import '@scullyio/scully-plugin-puppeteer'
import './scully/plugins/test';

export const config: ScullyConfig = {
projectRoot: "./src",
projectName: "TestProject",

// add spsModulePath when using de Scully Platform Server,
outDir: './dist/static',
routes: {
'/blog/:id': {
type: 'testPlugin'
},
'/blog/article': {
type: 'ignored'
}
}
};

---./scully/plugins/test.ts

import { HandledRoute, registerPlugin } from "@scullyio/scully"

export const testPlugin = 'testPlugin';

const testPluginFunction = async (route: string|undefined, config = {}): Promise<HandledRoute[]> => {
return Promise.resolve([
{ route: '/blog/1' },
{ route: '/blog/2' },
{ route: '/blog/3' },
{ route: '/blog/4' },
{ route: '/blog/5' },
]);
}

const validator = async (conf: any) => [];
registerPlugin('router', testPlugin, testPluginFunction, validator);

Every time I run the code, it throws the error 'MODULE NOT FOUND'. I tried something different taken from the web, it solved this problem, but still when scully runs, it doesn't list this pages as routes. So I came back to the old version, the one from the official documentation.

Do you know what could be the problem?

Sander Elias
@SanderElias
@IvanColucciSW is there more detail to your error?
I suspect the tsconfig inside your ./scully folder isn't enitrly what it should be.
IvanColucciSW
@IvanColucciSW
This is the content of the tsconfig inside my ./scully
{
"compileOnSave": false,
"compilerOptions": {
"esModuleInterop": true,
"importHelpers": false,
"lib": ["ES2019", "dom"],
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"target": "es2018",
"types": ["node"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"typeRoots": ["../node_modules/@types"],
"allowSyntheticDefaultImports": true
},
"exclude": ["./**/*spec.ts"]
}
IvanColucciSW
@IvanColucciSW
Now I uninstalled and installed again scully in the project and it is able to find the plugin, so no more 'MODULE NOT FOUND' error. But, still, it is not able to add the routes. It just generates the unhandled ones that Puppeteers can find
Charles Keatley
@cjkeatley
Hi Sander, any insight on the criticalCSS issue?
Sander Elias
@SanderElias
@IvanColucciSW I suspect you must add the route type too. I think its manadorty.
3 replies
@cjkeatley can you point me to the issue? Personally I switched away from criticalCss, because of the slow speed of it. It does a slightlybetter job as what I'm doing now tho.
Wheater
@Wheater
Hi there, I am having a recurrence of an issue fixed here: scullyio/scully#311
14 replies
Basically, when I navigate directly to a static page, then click around to load another static page, only the original static content is displayed.
So no matter which content I navigate to, only the original displays after loading up a link that includes static-content in it. If I load the website from the base url, everything works as expected.
The github issue I posted says the problem was fixed, but it's happening to me exactly as described there.
@SanderElias
levkach
@levkach

Hi everybody,

I'm designing a microfrontend app. The goal is to have an MFE with pregenerated HTML, using Scully. Alongside there will be some normal Angular MFEs. Shell MFE will combine them all using Angular Elements and Module Federation. I want to have multiple Angular versions (to be independent of Scully's Angular update cycle). For that, I'll have Lerna multi-project monorepo.

In Michael Geers' book, I came across a paragraph stating that WebComponents require Javascript, so I wonder if my design could work.
Does anyone have experience using Angular Elements + Scully (for pregenerated HTML)? Will I be able to benefit from pregenerated HTML if Scully app will be wrapped with Angular Element? I googled but couldn't find more info.