Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
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 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
    I used the following command line: ng add @scullyio/init@latest
    Angular version is 14.0.3 (Would that be the problem...?)
    OlegSuncrown
    @OlegSuncrown

    image.png

    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
    14.JPG
    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

    Mohammad Hossein Amri
    @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.

    s.JPG
    OlegSuncrown
    @OlegSuncrown
    Another possible way to add scully to angular 14:
    1. 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",
    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
    5. Add to polyfills.ts
      alt
    6. Add this files
      f.JPG
    7. Add this to package.json in the scripts:
      "scully": "scully",
      "scully:serve": "scully serve"
    Mohammad Hossein Amri
    @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
    Mohammad Hossein Amri
    @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
    image.png
    image.png

    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:

      ⚠ 
          =====================================================================================================
          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?

    ^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
    @MikePiper It seems your 'default' is dissapeared from your angular.json
    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.

    Thanks in advance, Leo