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)
2 replies
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
- Add this to your package.json
"@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- Create file
scully.blog.config.ts - Add this to
.gitignorescully.logscullyStats.json.scully/scully/**/*.js/scully/**/*.js.map/scully/**/*.d.ts - Add to polyfills.ts
- Add this files
- Add this to
package.jsonin 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
https://github.com/KittyPingu/scully-template-project
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
It is not something that Scully can fix! (you can fix static links in the generated files, we have a SEOhref plugin for that)
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?
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()
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
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.
- Is
SculltTransferServicedoing fetch during build? - 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?
should I add trailing slash in my routes to stop the redirect?
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