Unlighthouse Generates Reports for Root Route Instead of Specified Routes with Hash Routing enabled in Angular Single Page Application

[friendlyAce]

Details

Hi,

I am encountering an issue when using Unlighthouse with an Angular application that uses hash routing.
https://angular.dev/guide/routing/common-router-tasks#hashlocationstrategy

When I specify multiple routes for benchmarking, Unlighthouse generates one report for each specified route (OK).
However, all of the generated reports are for the root route (localhost:4200/) instead of the specified hash routes.

In the report, all the "whitened" screenshots in the screenshot timeline of the reports are displaying the same content & scores across the reports, as the same route was benchmarked.

The routes are available when i visit them via my normal chrome browser.
I also tried specifying the full URLs, same result.

urls: [
   'http://localhost:4200/#/demo?production=true',
   'http://localhost:4200/#/dummy',
   'http://localhost:4200/#/welcome',
   'http://localhost:4200/#/about'
 ],

When i disable hash routing via angular and change the URLs in the unlighthouse config accordingly, it works fine.

 urls: [
    '/demo?production=true',
    '/dummy',
    '/welcome',
    '/about'
  ],

The problem is that I am not able to disable hash routing for my angular application, so this solution would not be possible for me.

When i open chrome via CLI, it also opens the expected route as expected
chrome.exe http://localhost:4200/#/dummy

Is this a known bug, or am I missing some configuration? How can I ensure that Unlighthouse generates reports for the actual specified routes instead of the root route?

BR,
Vincent

CLI Log:

i Using system chrome located at: ... chrome.exe.                                                                                                                                                                                                     Unlighthouse 16:52:53
√ Request to site http://localhost:4200 redirected to http://localhost:4200/, using that as the site.                                                                                                                                                                                        Unlighthouse 16:52:53
i Creating Unlighthouse using config from unlighthouse.config.ts                                                                                                                                                                             Unlighthouse 16:52:53
i The url config has been provided with 4 paths for scanning. Disabling sitemap, robots, sampling and crawler.                                                                                                                                                                               Unlighthouse 16:52:53

 ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
 │                                                                                                  │
 │  ⛵  Unlighthouse cli @ v0.14.1                                                                   │
 │                                                                                                  │
 │  ▸ Scanning: http://localhost:4200/                                                              │
 │  ▸ Route Discovery: Manual 4 initial URLs                                                        │
 │                                                                                                  │
 │   💖 Like Unlighthouse? Support the development: https://github.com/sponsors/harlan-zw           │
 │                                                                                                  │
 │  Report: http://localhost:5678/                                                                  │
 │                                                                                                  │
 ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯

√ Completed inspectHtmlTask for /demo?production=true. (Time Taken: 2.7s 62.36 KB 25% complete)                                                                                                                                                                Unlighthouse 16:52:56  
√ Completed inspectHtmlTask for /dummy. (Time Taken: 2.6s 62.36 KB 40% complete)                                                                                                                                                  Unlighthouse 16:52:57  
√ Completed inspectHtmlTask for /welcome. (Time Taken: 3.2s 62.36 KB 50% complete)                                                                                                                             Unlighthouse 16:52:58  
√ Completed inspectHtmlTask for /about. (Time Taken: 2.1s 62.36 KB 57% complete)                                                                                                                                                                                                           Unlighthouse 16:52:58  
√ Completed runLighthouseTask for /demo?production=true (Time Taken: 18.4s Score: 0.86 Samples: 1 63% complete)                                                                                                                                 Unlighthouse 16:53:15  
√ Completed runLighthouseTask for /dummy. (Time Taken: 18.7s Score: 0.86 Samples: 1 75% complete)                                                                                                                                               Unlighthouse 16:53:15  
√ Completed runLighthouseTask for  /welcome. (Time Taken: 17.7s Score: 0.86 Samples: 1 88% complete)                                                                                                            Unlighthouse 16:53:16  
√ Completed runLighthouseTask for /about. (Time Taken: 17.6s Score: 0.86 Samples: 1 100% complete)                                                                                                                                                                                         Unlighthouse 16:53:16  
√ Unlighthouse has finished scanning http://localhost:4200/: 4 routes in 28s.   

scripts:

"unlighthouse": "unlighthouse --config-file ./unlighthouse.config.ts",
"unlighthouse-ci": "unlighthouse-ci --config-file ./unlighthouse.config.ts"

Version used: 0.14.1

unlighthouse.config.ts:

import { defineConfig } from 'unlighthouse';

export default defineConfig({
  site: 'http://localhost:4200',
  urls: [
    '/#/demo?production=true',
    '/#/dummy',
    '/#/welcome',
    '/#/about'
  ],
  discovery: false,
  scanner: {
    device: 'desktop',
    crawler: false,
    robotsTxt: false,
    sitemap: false,
    dynamicSampling: false,
    skipJavascript: false,
    samples: 1,
    throttle: true
  },
  puppeteerOptions: {
    headless: true,
    args: ['--no-sandbox'],
    defaultViewport: {
      width: 1920,
      height: 1080
    }
  },
  lighthouseOptions: {
    screenEmulation: {
      disabled: false,
      width: 1920,
      height: 1080,
      mobile: false
    }
  },
  ci: {
    reporter: 'jsonExpanded',
    buildStatic: true
  },
  outputPath: './.unlighthouse',
  chrome: {
    useSystem: true,
    useDownloadFallback: false
  }
});

Report:

[friendlyAce]

It actually only creates one report for the first specified hash route and ommits the reports for the other routes.

 urls:  [
         '/#/demo?production=true',
        '/#/dummy',
        '/#/welcome',
        '/#/about',
        '/#/overview' 
],

Debug log:

> unlighthouse --config-file ./unlighthouse.config.ts --debug

[Unlighthouse 16:34:33] D Starting Unlighthouse at root: demo-project cwd: c:\path\to\demo-project
D Discovered config definition { config:                                                         Unlighthouse 16:34:36
   { site: 'http://localhost:4200',
     urls:
      [ '/#/demo?production=true',
        '/#/dummy',
        '/#/welcome',
        '/#/about',
        '/#/overview' ],
     discovery: false,
     scanner:
      { device: 'desktop',
        crawler: false,
        robotsTxt: false,
        sitemap: false,
        dynamicSampling: false,
        skipJavascript: false,
        samples: 1,
        throttle: true },
     puppeteerOptions:
      { headless: true, args: [Array], defaultViewport: [Object], waitForInitialPage: true },
     lighthouseOptions: { screenEmulation: [Object] },
     ci: { reporter: 'jsonExpanded', buildStatic: true },
     outputPath: './.unlighthouse',
     chrome: { useSystem: true, useDownloadFallback: false } },
  sources:
   [ 'c:\\path\\to\\demo-project\\unlighthouse.config.ts' ],
  dependencies: [] }
i Using system chrome located at: c:\path\to\chrome.exe.         Unlighthouse 16:34:36
D Post config resolution { routerPrefix: '/',                                                    Unlighthouse 16:34:36
  apiPrefix: '/api',
  cache: true,
  client:
   { groupRoutesKey: 'route.definition.name',
     columns:
      { overview: [Array],
        performance: [Array],
        accessibility: [Array],
        'best-practices': [Array],
        seo: [Array] } },
  scanner:
   { customSampling: {},
     ignoreI18nPages: true,
     maxRoutes: 200,
     skipJavascript: false,
     samples: 1,
     throttle: true,
     crawler: false,
     dynamicSampling: false,
     sitemap: false,
     robotsTxt: false,
     device: 'desktop',
     exclude: [ '/cdn-cgi/*' ] },
  server: { port: 5678, showURL: false, open: true },
  discovery: false,
  root: 'C:\\path\\to\\demo-project',
  outputPath: 'C:\\path\\to\\demo-project\\.unlighthouse',
  debug: true,
  puppeteerOptions:
   { headless: true,
     ignoreHTTPSErrors: true,
     timeout: 0,
     protocolTimeout: 0,
     args: [ '--no-sandbox' ],
     defaultViewport:
      { mobile: false, width: 1350, height: 940, deviceScaleFactor: 1, disabled: false },
     waitForInitialPage: true,
     executablePath: 'C:\\path\\to\\chrome.exe' },
  puppeteerClusterOptions:
   { timeout: 300000,
     monitor: true,
     workerCreationDelay: 500,
     retryLimit: 3,
     maxConcurrency: 27,
     skipDuplicateUrls: false,
     retryDelay: 2000,
     concurrency: 3,
     puppeteer:
      PuppeteerNode {
        _isPuppeteerCore: true,
        _changedBrowsers: false,
        connect: [Function: bound bound connect],
        defaultBrowserRevision: '131.0.6778.85',
        configuration: [Object],
        launch: [Function: bound launch],
        executablePath: [Function: bound executablePath],
        defaultArgs: [Function: bound defaultArgs],
        trimCache: [Function: bound trimCache] AsyncFunction } },
  lighthouseOptions:
   { onlyCategories: [ 'performance', 'accessibility', 'best-practices', 'seo' ],
     screenEmulation:
      { mobile: false, width: 1350, height: 940, deviceScaleFactor: 1, disabled: false },
     throttlingMethod: 'simulate',
     throttling:
      { rttMs: 150,
        throughputKbps: 1638.4,
        requestLatencyMs: 600,
        downloadThroughputKbps: 1638.4,
        uploadThroughputKbps: 750,
        cpuSlowdownMultiplier: 1 },
     formFactor: 'desktop',
     emulatedUserAgent:
      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36' },
  urls:
   [ '/#/demo?production=true',
     '/#/dummy',
     '/#/welcome',
     '/#/about',
     '/#/overview' ],
  configFile: './unlighthouse.config.ts',
  hooks: { 'resolved-config': [AsyncFunction: resolved-config] },
  site: 'http://localhost:4200',
  ci: { reporter: 'jsonExpanded', buildStatic: true },
  chrome:
   { useSystem: true,
     useDownloadFallback: false,
     downloadFallbackCacheDir: 'C:\\user\\demo\\.unlighthouse' } }
D Testing Site http://localhost:4200 is valid.                                                   Unlighthouse 16:34:36
[Unlighthouse 16:34:36] √ Request to site http://localhost:4200 redirected to http://localhost:4200/, using that as the site.
[Unlighthouse 16:34:36] i Creating Unlighthouse using config from c:\path\to\demo-project\unlighthouse.config.ts
D Setting Unlighthouse Site URL [Site: http://localhost:4200/]                                   Unlighthouse 16:34:36
D Setting Unlighthouse Server Context [Server: http://localhost:5678/]                           Unlighthouse 16:34:36
D Creating new Unrouted ctx: unlighthouse-api { debug: true,                                 unlighthouse-api 16:34:36
  prefix: '/',
  middleware: [],
  hooks: { 'serve:before-route': [Function: serve:before-route] },
  plugins: [ { meta: [Object], setup: [AsyncFunction: setup] } ],
  presets:
   [ { meta: [Object], setup: [AsyncFunction: setup] },
     { meta: [Object], setup: [AsyncFunction: setup] } ],
  name: 'unlighthouse-api',
  app:
   { use: [Function: use],
     resolve: [AsyncFunction (anonymous)],
     handler:
      { [AsyncFunction (anonymous)] __is_handler__: true, __resolve__: [AsyncFunction (anonymous)] },
     stack: [],
     options: {},
     websocket: [Getter] } }
D Using preset: @unrouted/[email protected]                                                   unlighthouse-api 16:34:36
D Using preset: @unrouted/[email protected]                                                  unlighthouse-api 16:34:36
D Using plugin: lazyRouteHandles                                                             unlighthouse-api 16:34:36
D Registering route get /__lighthouse.                                                       unlighthouse-api 16:34:36
D Registering route post /api/reports/rescan.                                                unlighthouse-api 16:34:36
D Registering route post /api/reports/:id/rescan.                                            unlighthouse-api 16:34:36
D Registering route get,head /api/__launch.                                                  unlighthouse-api 16:34:36
D Registering route get,head /api/ws.                                                        unlighthouse-api 16:34:36
D Registering route get,head /api/reports.                                                   unlighthouse-api 16:34:36
D Registering route get,head /api/scan-meta.                                                 unlighthouse-api 16:34:36
D Registering route get /**.                                                                 unlighthouse-api 16:34:36
D Registering route get /.                                                                   unlighthouse-api 16:34:36
D Setting up 9 routes.                                                                       unlighthouse-api 16:34:36
[Unlighthouse 16:34:36] D Starting Unlighthouse [Server: http://localhost:5678/ Site: http://localhost:4200/ Debug: true]
[Unlighthouse 16:34:36] i The url config has been provided with 5 paths for scanning. Disabling sitemap, robots, sampling and crawler.
D Resolved reportable routes 5                                                                   Unlighthouse 16:34:36
D Route has been queued. Path: / Name: _index.                                                   Unlighthouse 16:34:36
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:36

 ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
 │                                                                                                  │
 │  ⛵  Unlighthouse cli @ v0.14.1                                                                   │
 │                                                                                                  │
 │  ▸ Scanning: http://localhost:4200/                                                              │
 │  ▸ Route Discovery: Manual 5 initial URLs                                                        │
 │                                                                                                  │
 │   💖 Like Unlighthouse? Support the development: https://github.com/sponsors/harlan-zw           │
 │                                                                                                  │
 │  Report: http://localhost:5678/                                                                  │
 │                                                                                                  │
 ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯

D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:37
D GET /api/reports 200 object - 0ms                                                          unlighthouse-api 16:34:37
D HTML extract of http://localhost:4200/#/demo?production=true response succeeded.                            Unlighthouse 16:34:39
√ Completed inspectHtmlTask for /. (Time Taken: 2.0s 67.92 KB 100% complete)                     Unlighthouse 16:34:39
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:41
D GET /api/scan-meta 200 object - 1ms                                                        unlighthouse-api 16:34:42
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:46
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:47
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:51
√ Completed runLighthouseTask for /. (Time Taken: 12.1s Score: 0.85 Samples: 1 100% complete)    Unlighthouse 16:34:51
√ Unlighthouse has finished scanning http://localhost:4200/: 1 routes in 18s.                    Unlighthouse 16:34:51
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:52
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:56
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:56
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:56
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:56
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:56
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:56
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:56
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:34:57
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:35:01
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:35:02
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:35:06
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:35:07
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:35:11
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:35:12
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:35:16
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:35:17
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:35:21
D GET /api/scan-meta 200 object - 0ms                                                        unlighthouse-api 16:35:22

[harlan-zw]

Hi, thanks for the detailed issue. I've pushed up a fix for this in that it will avoid normalising the hash when the hash starts with a /.

I'm not too sure if this will correctly crawl all links but it should allow you to manually specify the paths to scan.