Running Scully in Angular 15? #1659

fireflysemantics · 2023-04-20T18:46:21Z

🐞 Bug report

Trying to run scully in a project upgraded to Angular 15.

I've documented the approach on SO:
https://stackoverflow.com/questions/76067189/running-scully-in-an-angular-15-project

Angular Version:

Angular CLI: 15.2.6
Node: 19.8.1 (Unsupported)
Package Manager: npm 9.5.1
OS: darwin arm64

Angular: 15.2.8

KaliaHayes · 2023-04-23T13:55:39Z

Outlined my v15.2.6 solutions here: #1625 (comment)

Hope it helps!

nelsongutidev · 2023-04-24T00:38:14Z

Can you try the steps outlined on the following blog post?

https://blog.herodevs.com/how-to-add-scully-to-your-angular-15-application-b9472aa19ebc

fireflysemantics · 2023-04-24T18:22:31Z

@nelsongutidev sure. It looks promising. I'll outline my steps here ( Just did the whole thing ... Still no love ...):

Dependencies

% npm i @scullyio/scully @scullyio/ng-lib @scullyio/scully-plugin-puppeteer 
npm WARN deprecated [email protected]: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated @wessberg/[email protected]: this package has been renamed to ts-evaluator. Please install ts-evaluator instead
npm WARN deprecated [email protected]: Package no longer supported. Replaced by @asciidoctor/core
npm WARN deprecated [email protected]: < 19.4.0 is no longer supported

added 192 packages, and audited 2469 packages in 3m

Module Configuration

Next added the ScullyLibModule to app.module.ts.

Scully Configuration

My scully.fs-developer-app.config.ts looks like this:

import { ScullyConfig } from '@scullyio/scully';
export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "fs-developer-app",
  distFolder: './dist/fs-developer-app',
  defaultPostRenderers: [],
  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', ...
};

Update `angular.json`

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

Add Scully Scripts

"scripts": {
    "scully": "scully",
    "scully:serve": "scully serve"
  }

Showtime!

npm run build && npm run scully

Result

Would you allow Scully to collect anonymous errors to improve our services? (Y/n)Y
  ✔ Puppeteer is being launched
  ✔ there are 257 routes added through extraRoutes
  ✔ Successfully scanned Angular app for routes
  ⚠ No configuration for route "/:category" found. Skipping
  ⚠ No configuration for route "/:category/:topic" found. Skipping
  ✔ Successfully added routes created from routePlugins
  ✔ Route list created in files:
     "./src/assets/scully-routes.json",
     "/Users/oleersoy/Temp/fs-developer-app/dist/static/assets/scully-routes.json",
     "/Users/oleersoy/Temp/fs-developer-app/dist/fs-developer-app/assets/scully-routes.json"

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

Fixing the Chrome Issue

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

Showtime!! One more time!!

npm run build && npm run scully

Result

Same result. Even if I add:

npm run build && npm run scully --serverTimeout=300000

nelsongutidev · 2023-04-24T18:28:30Z

can you try adding this line to your scully config file:

import '@scullyio/scully-plugin-puppeteer';

and also adding this prop (puppeteerLaunchOptions) to the ScullyConfig:

export const config: ScullyConfig = {
projectRoot: "./src",
projectName: "fs-developer-app",
distFolder: './dist/fs-developer-app',
defaultPostRenderers: [],
outDir: './dist/static',
routes: {
},
puppeteerLaunchOptions: {args: ['--no-sandbox', '--disable-setuid--sandbox']}, // ADD THIS!
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', ...
};

fireflysemantics · 2023-04-24T19:15:06Z

@nelsongutidev let me give that a try. Here's the new config:

import { ScullyConfig } from '@scullyio/scully';
import '@scullyio/scully-plugin-puppeteer';
export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "fs-developer-app",
  distFolder: './dist/fs-developer-app',
  puppeteerLaunchOptions: {args: ['--no-sandbox', '--disable-setuid--sandbox']},  
  defaultPostRenderers: [],
  outDir: './dist/static',
  
  routes: {
  },
  extraRoutes: ['/blogs','/guides','/tasks','/formulas','/concepts','/examples','/blogs/blogs--design--the-human-algorithm-for-learning',

All fingers crossed:

> [email protected] scully
> scully

  ⚠ Folder "./scully" doesn't seem to contain custom plugins
  ✔ new Angular build files imported
  ✔ Starting servers for project "fs-developer-app"
  ✔ Started Scully static server on "http://localhost:1668/"
  ✔ Started Angular distribution server on "http://localhost:1864/" 
  ✔ Scully Development Server is up and running
  ✔ Puppeteer is being launched
  ✔ there are 257 routes added through extraRoutes
  ⚠ ----------------------------------
  ⚠ Using stored unhandled routes!.
  ⚠    To discover new routes in the angular app use "npx scully --scanRoutes"
  ⚠ ----------------------------------
  ⚠ No configuration for route "/:category" found. Skipping
  ⚠ No configuration for route "/:category/:topic" found. Skipping
  ✔ Successfully added routes created from routePlugins
  ✔ Route list created in files:
     "./src/assets/scully-routes.json",
     "/Users/oleersoy/Temp/fs-developer-app/dist/static/assets/scully-routes.json",
     "/Users/oleersoy/Temp/fs-developer-app/dist/fs-developer-app/assets/scully-routes.json"

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

Still the same result. I'll try it with the executable path as well:

import { ScullyConfig } from '@scullyio/scully';
import '@scullyio/scully-plugin-puppeteer';
export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "fs-developer-app",
  distFolder: './dist/fs-developer-app',
  puppeteerLaunchOptions: {executablePath: '/Applications/Google Chrome.app/', args: ['--no-sandbox', '--disable-setuid--sandbox']},  
  defaultPostRenderers: [],
  outDir: './dist/static',
  
  routes: {
  },
  extraRoutes: ['/blogs','/guides','/tasks','/formulas','/concepts','/examples','/blogs/blogs--design--the-human-algorithm-for-learning',

Result:

Still the same ...

mocolicious · 2023-07-02T23:01:33Z

I'm not sure if you've had this issue @fireflysemantics, but if I use any version after 14 I get "Sorry, could not load static page content" on the pages

fireflysemantics · 2023-07-03T04:31:33Z

@mocolicious we tried a whole bunch of permutations to get it working in Angular 15/16 however no love so far. IIUC the fix is being worked on, so lets keep our fingers crossed.

mocolicious · 2023-07-03T17:02:47Z

@mocolicious we tried a whole bunch of permutations to get it working in Angular 15/16 however no love so far. IIUC the fix is being worked on, so lets keep our fingers crossed.

I was able to get it to work if I downgraded to 16.0.2 but im not sure at what point static page content stops being rendered

jakubzet · 2023-08-28T11:34:29Z

Hello! Was anyone able to overcome this issue in other way than by downgrading?

DineshCodeFlow · 2023-09-20T13:49:09Z

I am also into this issue:
Angular CLI: 13.3.11
Node: 16.15.1
Gettting:

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

My config file is as follows:


export const config: ScullyConfig = {
  projectRoot: "./projects/website/src",
  defaultPostRenderers: postRenderers,
  projectName: "website",
  outDir: './dist/static',
  puppeteerLaunchOptions: {
    args: [
      '--disable-gpu',
      '--renderer',
      '--no-sandbox',
      '--no-service-autorun',
      '--no-experiments',
      '--no-default-browser-check',
      '--disable-dev-shm-usage',
      '--disable-setuid-sandbox',
      '--no-first-run',
      '--no-zygote',
      '--single-process',
      '--disable-extensions',
      '--user-agent=\'Scully Navigator\''
    ],
    headless: true,
    executablePath: puppeteer.executablePath(),
    timeout: 120000
  },
  routes: {
    // '/blog/:category': {
    //   type: 'blogs',
    //   url: 'http://localhost:3000/notion-html',
    //   postRenderers: postRenderers
    // },
    // '/blog/:category/:slug': {
    //   type: 'blogs',
    //   url: 'http://localhost:3000/notion-html',
    //   postRenderers: postRenderers
    // },
    // '/ping': {
    //     type: 'default',
    //     manualIdleCheck: true
    // },
  },
};

Added in angular.js:

{
    "defaultProject": "website",
}

Command to run:
ng build --stats-json && npx scully build && npx scully --scanRoutes

Operating system:
Macbook pro M1

DineshCodeFlow · 2023-09-20T16:39:23Z

Is there any quick fix for this? I have tried angular 13, 14, 15 and 16 too, no success! Feeling scully is still under development and requires more testing

DineshCodeFlow · 2023-09-21T03:24:19Z

I've discovered a solution that works for me on my Apple MacBook Pro with an M1 chip:

Angular: 16.2.0
Scully: 2.1.41

First, download version 88.0.4324.150-1.1: Binaries for macOS 64-bit ARM ("Apple Silicon").
Download Binaries for macOS
Install it and ensure it's in your ~/Applications directory.

You don't need to update your scully.config.ts file, but I've included it for reference in case it's needed for CI/CD after development.

import { ScullyConfig, setPluginConfig } from '@scullyio/scully';
import '@notiz/scully-plugin-rss';
require("@notiz/scully-plugin-fouc");

import '@scullyio/scully-plugin-puppeteer';
require('scully-plugin-canonical');
require('@notiz/scully-plugin-medium-zoom');

require('scully-plugin-minify-html');
require('scully-plugin-page-title');
require('scully-plugin-amp-css');
import { getSitemapPlugin } from '@gammastream/scully-plugin-sitemap';
import { getHttp404Plugin } from '@gammastream/scully-plugin-http404';
import './.scully/plugins/dynamicRoutesPlugin';
const {DisableAngular} = require('scully-plugin-disable-angular');
const puppeteer = require('puppeteer')
console.log(puppeteer.executablePath())
setPluginConfig(DisableAngular, 'render', {
  removeState: true,
});


const Http404Plugin = getHttp404Plugin();
const SitemapPlugin = getSitemapPlugin();
setPluginConfig(SitemapPlugin, {
  urlPrefix: 'https://shorterloop.com',
  sitemapFilename: 'sitemap.xml',
  changeFreq: 'monthly',
  priority: [
    '1.0',
    '0.9',
    '0.8',
    '0.7',
    '0.6',
    '0.5',
    '0.4',
    '0.3',
    '0.2',
    '0.1',
    '0.0',
  ],
  ignoredRoutes: ['/404']
});

const postRenderers = [
  DisableAngular,
  Http404Plugin, 
  "mediumZoom",
  "fouc",
  'seoHrefOptimise', 
  'combineStylesAmpPlugin', 
  'changeTitlePlugin', 
  'MinifyHtml', 
  'seoHrefOptimise', 
  'setCanonicalLinkPlugin', 
];

export const config: ScullyConfig = {
  projectRoot: "./projects/website/src",
  defaultPostRenderers: postRenderers,
  projectName: "website",
  outDir: './dist/static',
  puppeteerLaunchOptions: {
    args: [
      '--disable-gpu',
      '--renderer',
      '--no-sandbox',
      '--no-service-autorun',
      '--no-experiments',
      '--no-default-browser-check',
      '--disable-dev-shm-usage',
      '--disable-setuid-sandbox',
      '--no-first-run',
      '--no-zygote',
      '--single-process',
      '--disable-extensions',
      '--user-agent=\'Scully Navigator\'',
      '--disable-headless-warning'
    ],
    headless: true,
    executablePath: puppeteer.executablePath(),
    timeout: 120000
  },
  routes: {
    '/blog/:category': {
      type: 'blogs',
      url: 'http://localhost:3000/notion-html',
      postRenderers: postRenderers,
      manualIdleCheck: true
    },
    '/blog/:category/:slug': {
      type: 'blogs',
      url: 'http://localhost:3000/notion-html',
      postRenderers: postRenderers,
      manualIdleCheck: true
    },
    // '/ping': {
    //     type: 'default',
    //     manualIdleCheck: true
    // },
  },
};

I'm sharing my package.json for your reference as well:

{
  "name": "angular-static-scully",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve website",
    "watch": "ng build website --watch --configuration development",
    "test": "ng test website",
    "build": "ng build --stats-json website && npx scully build --serverTimeout 30000 --project=website && npx scully --serverTimeout 30000 --scanRoutes --project=website"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "@scullyio/init": "^2.1.21",
    "@scullyio/ng-lib": "^2.1.41",
    "@scullyio/platform-server": "^2.1.0",
    "@scullyio/scully": "^2.1.41",
    "@scullyio/scully-plugin-puppeteer": "^2.1.41",
    "ngx-scrolltop": "^6.0.0",
    "node-fetch": "^2.6.6",
    "rxjs": "~7.8.0",
    "scully-plugin-disable-angular": "^8.0.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.1",
    "@angular/cli": "~16.2.1",
    "@angular/compiler-cli": "^16.2.0",
    "@gammastream/scully-plugin-http404": "^1.0.4",
    "@gammastream/scully-plugin-sitemap": "^1.0.1",
    "@notiz/scully-plugin-fouc": "^0.3.0",
    "@notiz/scully-plugin-lazy-images": "^0.5.0",
    "@notiz/scully-plugin-medium-zoom": "^0.3.0",
    "@notiz/scully-plugin-rss": "^1.2.0",
    "@types/fs-extra": "^11.0.2",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "ng-packagr": "^16.2.0",
    "scully-plugin-amp-css": "^2.0.0",
    "scully-plugin-canonical": "^2.0.0",
    "scully-plugin-minify-html": "^6.0.0",
    "scully-plugin-page-title": "^2.0.0",
    "typescript": "~5.1.3"
  },
  "peerDependencies": {
    "fast-xml-parser": "^4.3.0",
    "path-to-regexp": "^0.1.7",
    "xmlbuilder": "^13.0.2"
  }
}

I hope this helps someone facing a similar issue!

kbabol · 2023-10-03T17:44:11Z

This project works for me with Angular 16.2.x (under WIndows 10): https://github.com/PacktPublishing/Angular-Projects-Third-Edition/tree/main/Chapter02

Deliana90 · 2023-10-06T10:06:47Z

last commit 2022, scully become skull ? ? ?

fireflysemantics added the bug Something isn't working label Apr 20, 2023

fireflysemantics mentioned this issue Apr 23, 2023

Support for Angular 14 #1625

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Running Scully in Angular 15? #1659

Running Scully in Angular 15? #1659

fireflysemantics commented Apr 20, 2023

KaliaHayes commented Apr 23, 2023

nelsongutidev commented Apr 24, 2023

fireflysemantics commented Apr 24, 2023 •

edited

Loading

nelsongutidev commented Apr 24, 2023 •

edited

Loading

fireflysemantics commented Apr 24, 2023

mocolicious commented Jul 2, 2023

fireflysemantics commented Jul 3, 2023

mocolicious commented Jul 3, 2023

jakubzet commented Aug 28, 2023

DineshCodeFlow commented Sep 20, 2023 •

edited

Loading

DineshCodeFlow commented Sep 20, 2023

DineshCodeFlow commented Sep 21, 2023 •

edited

Loading

kbabol commented Oct 3, 2023

Deliana90 commented Oct 6, 2023

Running Scully in Angular 15? #1659

Running Scully in Angular 15? #1659

Comments

fireflysemantics commented Apr 20, 2023

🐞 Bug report

KaliaHayes commented Apr 23, 2023

nelsongutidev commented Apr 24, 2023

fireflysemantics commented Apr 24, 2023 • edited Loading

Dependencies

Module Configuration

Scully Configuration

Update angular.json

Add Scully Scripts

Showtime!

Result

Fixing the Chrome Issue

Showtime!! One more time!!

Result

nelsongutidev commented Apr 24, 2023 • edited Loading

fireflysemantics commented Apr 24, 2023

mocolicious commented Jul 2, 2023

fireflysemantics commented Jul 3, 2023

mocolicious commented Jul 3, 2023

jakubzet commented Aug 28, 2023

DineshCodeFlow commented Sep 20, 2023 • edited Loading

DineshCodeFlow commented Sep 20, 2023

DineshCodeFlow commented Sep 21, 2023 • edited Loading

kbabol commented Oct 3, 2023

Deliana90 commented Oct 6, 2023

fireflysemantics commented Apr 24, 2023 •

edited

Loading

Update `angular.json`

nelsongutidev commented Apr 24, 2023 •

edited

Loading

DineshCodeFlow commented Sep 20, 2023 •

edited

Loading

DineshCodeFlow commented Sep 21, 2023 •

edited

Loading