How to setup guessjs in an angular cli project using the ui-router?

Question

I am trying to setup guessjs for prefetching some of my modules currently via a static routes.json file. The project uses angular cli with custom webpack config as described here https://guess-js.github.io/docs/angular

However, the project uses UI router for routing rather than the Angular Router module.

This is the custom-webpack config file

new GuessPlugin({
            // Alternatively you can provide a Google Analytics View ID
            // GA: 'XXXXXX',
            reportProvider() {
                return Promise.resolve(
                    JSON.parse(
                        require('fs')
                        .readFileSync(helpers.root('src/routes.json'))
                    )
                );
            },
            runtime: {
                delegate: false
            },
            routeProvider() {
                return parseRoutes('.');
            }
        })

And this is custom routes.json file

{
    "/": {
        "/connection": 50
    }
}

And this is in my app.routes.ts file

    {
        name: 'connection.**',
        url: '/connection',
        loadChildren: () => import('../connection/connection.module').then((m) => m.ConnectionModule)
    },

When I run the build, in the terminal I don't see any mappings in the table

🔮 Guess.js introduced the following prefetching instructions:
INFO::1573516022471:: 

╔════════════╤════════╤═════════════╗
║ Prefetcher │ Target │ Probability ║
╚════════════╧════════╧═════════════╝

This table is empty. I believe this table should be populated with the route specified in the routes.json?

Is there any separate config I need to do setup guessjs to be used with UI Router?

Angular: 8.2.0 UI Router: 4.0.0 guess-parser: 0.4.12 guess-webpack: 0.4.12

Thank you for your help.

Answer 1

Just got a response from the owner of the library - UI Router is not currently supported by Guess.js just the Angular Router for Angular apps. Hope this helps.