skip to Main Content

I’m upgrading a Angular 12 project to an Angular 15 project and attempting to run scully on it again.

Before this worked fine.

ng add @scullyio/init --skip-confirmation --defaults
ng build
npx scully --

Now it produces this error:

      =====================================================================================================
      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.
    =====================================================================================================

The angular.json file looks like this. The <projectName> is fs-developer-app.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "fs-developer-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "skipTests": true
        },
        "@schematics/angular:class": {
          "skipTests": true
        },
        "@schematics/angular:directive": {
          "skipTests": true
        },
        "@schematics/angular:guard": {
          "skipTests": true
        },
        "@schematics/angular:interceptor": {
          "skipTests": true
        },
        "@schematics/angular:pipe": {
          "skipTests": true
        },
        "@schematics/angular:resolver": {
          "skipTests": true
        },
        "@schematics/angular:service": {
          "skipTests": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/fs-developer-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "10MB",
                  "maximumError": "20MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "fs-developer-app:build:production"
            },
            "development": {
              "browserTarget": "fs-developer-app:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "fs-developer-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}
And the `scully.fs-developer-app.config.ts` looks like this:
import { ScullyConfig } from '@scullyio/scully';
export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "fs-developer-app",
  outDir: './dist/static',
  routes: {
  },
  extraRoutes: ['/blogs','/guides','/tasks','/formulas','/concepts','/examples','/blogs/blogs--design--the-human-algorithm-for-learning','/blogs/blogs--design--the-power-of-the-simplest-possible-example','/guides/guides--introduction-to-the-firefly-semantics-slice-reactive-entity-store','/guides/guides--introduction-to-the-firefly-semantics-slice-reactive-object-store','/guides/guides--recreating-the-ngrx-demo-app-with-firefly-semantics-slice-state-manager','/guides/guides--dexie--browser-big-data-with-dexie-and-typescript','/guides/guides--macos--mac-os-keyboard-shortcuts'
... etc

Update

The answer provided by KaliaHayes looks promising and I tried it once, and it "Almost" worked, so I’m going to try it fresh again with all the steps outlined here:

First I recreated the entire projects fresh. Then built it:

ng build

Next install Scully puppeteer:

npm install @scullyio/scully-plugin-puppeteer

Try running scully:

npx scully --project fs-developer-app

This results in:

=================================================================================================
Puppeteer cannot find or launch the browser. (by default chrome)
 Try adding 'puppeteerLaunchOptions: {executablePath: CHROMIUM_PATH}'
 to your scully.*.config.ts file.
Also, this might happen because the default timeout (60 seconds) is to short on this system
this can be fixed by adding the --serverTimeout=x cmd line option.
   (where x = the new timeout in milliseconds)
When this happens in CI/CD you can find some additional information here:
https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md
=================================================================================================

I’m on MacOS, so I found the launch path like this:

osascript -e 'POSIX path of (path to application "Chrome")'

Then added it to the config like this:

export const config: ScullyConfig = {
  puppeteerLaunchOptions: {executablePath: '/Applications/Google Chrome.app/'},
...  

Tried again, but I still get the same error. So I try adding the --serverTimeout=x command line option:

 npx scully --project fs-developer-app --serverTimeout=300000

Still get the same error …

2

Answers


  1. Try adding in angular.json:

    {
        "defaultProject": "fs-developer-app",
    }
    

    Apparently defaultProject was dropped in Angular 14 but Scully still uses it.

    Login or Signup to reply.
  2. Try specifying your project name:

    ng add @scullyio/init --skip-confirmation --defaults
    ng build
    npx scully --project fs-developer-app
    

    Source

    Overall, I’m sure the next Scully update will mitigate these issues. I would also recc. checking out Analogjs in the meantime.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search