A public channel for the Angular community to come talk about Scully and JAMStack strategies in Angular.
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 C:\NickProjects\personalwebsite\frontend\node_modules\@scullyio\init\src\ng-add\index.js:89:24
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)
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 renamescully.blog.config.ts
toscully.undefined.config.ts
or runnpx scully --project blog
"@scullyio/init": "^2.1.36",
"@scullyio/ng-lib": "^2.1.0",
"@scullyio/scully": "^2.1.0",
"@scullyio/scully-plugin-puppeteer": "^2.1.0",
npm i
scully.blog.config.ts
.gitignore
scully.log
scullyStats.json
.scully
/scully/**/*.js
/scully/**/*.js.map
/scully/**/*.d.ts
package.json
in the scripts:"scully": "scully",
"scully:serve": "scully serve"
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
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
: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?
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()
FlashPreventionSwitchDone
on windows.
@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.
SculltTransferService
doing fetch during build?SculltTransferService
, I tried and it didn't work for me, but still want to be sure, maybe I missed something?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:
⚠
=====================================================================================================
Config file "./scully.undefined.config.ts" not found, only rendering routes without parameters
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?
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?
{
"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"]
}
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.
Thanks in advance, Leo