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