Summary

I have a simple website https://d2runes.io done with Angular v14. My goal is to add SEO and meta tags with Scully v2.1.41. There are no servers/requests - all is done on the FE.

Repo: https://github.com/Martin-Antonov/d2runes

The Problem

Scully finds all routes with parameters, generates static html files, but those html files contain only my main page and not the specific subpage. There are also no meta tags, but that might be solved after I get the actual page.

What I have tried

1. Reinstall Scully, Upgrade Angular, Upgrade Scully.
2. Tried to add the following configuration to Scully:

ScullyLibModule.forRoot({
      useTransferState: true,
      alwaysMonitor: false,
      manualIdle: true,
    })

which delays the generation to 25 seconds to make sure all is rendered. 3. Tried to add all my routes to the extraRoutes config. 4. Tried various approaches to adding meta tags and titles - currently with the built-in Angular services.

Relevant Code

Repo: https://github.com/Martin-Antonov/d2runes

1. Scully config:

import {ScullyConfig} from '@scullyio/scully';
import {HandledRoute, registerPlugin} from "@scullyio/scully"
import {RUNES_D2R} from "./src/app/services/runes/models/Runes";

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: 'd2r-runes',
  distFolder: './dist/d2r-runes',
  outDir: './dist/static',
  defaultPostRenderers: [],
  routes: {
    '/runes/:runeId': {
      type: 'runes',
    },
  },
};

// Generate all routes with a plugin
function runesPlugin(route: string, config = {}): Promise<HandledRoute[]> {
  const rs = RUNES_D2R.map((r) => {
    return {route: '/runes/' + r.key}
  })

  return Promise.resolve(rs);
}

const validatorRunes = async (conf) => [];
registerPlugin('router', 'runes', runesPlugin, validatorRunes);

2. SEO Service

@Injectable({
  providedIn: 'root'
})
export class SeoService {
  constructor(private ts: Title, private meta: Meta, private router: Router, private scully: ScullyRoutesService) {
    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((ev: RouterEvent) => {
      this.setTags(ev.url);
    });
     
    this.scully.getCurrent().subscribe((link) => {
      const url = link.route;
      this.setTags(url);
    });
  }
  
  setTags(url: string) {
    // Sets tags correctly when I ng-serve
  }
}

The problem was that in app routing, I have set useHash: true and Scully does not support this.

PS: Love it how after many days of trying, I finally post my question and immediately solve it...