Running Scully in Angular 15?

fireflysemantics commented 1 year ago

🐞 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 commented 1 year ago

Outlined my v15.2.6 solutions here: https://github.com/scullyio/scully/issues/1625#issuecomment-1519071971

Hope it helps!

nelsongutidev commented 1 year ago

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 commented 1 year ago

@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 w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated @wessberg/ts-evaluator@0.0.27: this package has been renamed to ts-evaluator. Please install ts-evaluator instead
npm WARN deprecated asciidoctor.js@1.5.9: Package no longer supported. Replaced by @asciidoctor/core
npm WARN deprecated puppeteer@13.7.0: < 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 commented 1 year ago

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 commented 1 year ago

@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:

> fs-developer-app@0.0.0 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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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

DineshCodeFlow commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

last commit 2022, scully become skull ? ? ?

scullyio / scully