Problem with generating routes and loading styles and scripts

[Denys Silberman]

🐞 Bug report

Hello,
I'm trying to build a project with multiple pages, but facing a problem with generating routes after running build-scully

Description

The error I'm getting is next

⠹ Loading guess-parser and scanning Angular app for routes Error: Multiple root routing modules found /Users/mantebose/Documents/hub/src/app/home/home-routing.module.ts, /Users/mantebose/Documents/hub/src/app/core/core-routing.module.ts, /Users/mantebose/Documents/hub/src/app/classic/classic-routing.module.ts
    at Object.exports.findRootModule (/Users/mantebose/Documents/hub/node_modules/guess-parser/dist/guess-parser/index.js:194:15)
    at Object.exports.parseRoutes [as parseAngularRoutes] (/Users/mantebose/Documents/hub/node_modules/guess-parser/dist/guess-parser/index.js:958:51)
    at plugin (/Users/mantebose/Documents/hub/node_modules/@scullyio/scully/src/lib/routerPlugins/traverseAppRoutesPlugin.js:53:41)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.wrap (/Users/mantebose/Documentshub/node_modules/@scullyio/scully/src/lib/pluginManagement/pluginWrap.js:53:18)
    at async plugin (/Users/mantebose/Documents/hub/node_modules/@scullyio/scully/src/lib/utils/handlers/handleTravesal.js:23:27)
    at async Object.wrap (/Users/mantebose/Documents/hub/node_modules/@scullyio/scully/src/lib/pluginManagement/pluginWrap.js:53:18)
    at async plugin (/Users/mantebose/Documents/hub/node_modules/@scullyio/scully/src/lib/utils/handlers/defaultAction.js:32:33)
    at async Object.wrap (/Users/mantebose/Documents/hub/node_modules/@scullyio/scully/src/lib/pluginManagement/pluginWrap.js:53:18)
  x 
We encountered a problem while reading the routes from your applications source.
This might happen when there are lazy-loaded routes, that are not loaded,
Or when there are paths we can not resolve statically.
Check the routes in your app, rebuild and retry.
(You can inspect the error by passing the --showGuessError flag

And after finishing of script, I'm getting only one index.html in dist folder, without additional pages.

🔬 Minimal Reproduction

Here's example of my routing

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

export enum RoutesPath {
  MAIN = '',
  CORE = 'core',
  CLASSIC = 'classic'
}

export function getRoutesPath(path: RoutesPath): string {
  return '/' + path;
}

const routes: Routes = [
  { path: RoutesPath.MAIN, loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: RoutesPath.CORE, loadChildren: () => import('./core/core.module').then(m => m.CoreModule) },
  { path: RoutesPath.CLASSIC, loadChildren: () => import('./classic/classic.module').then(m => m.ClassicModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}
 

And each page has it's own module with next example of routing

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CoreComponent } from './core.component';

const routes: Routes = [{ path: '', component: CoreComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CoreRoutingModule { }

I have tried to update scully config by adding extra routes and it helps with generating separate folder for each page with index.html in them, although error after running build-scully doesn't disappears.

Plus, it seems like this routes has some issue with paths to scripts and styles, because after deployment. Example, if I'm entering main page (example.com) and switching to another page through menu (example.com/classic) - everything is okay. But if I will refresh the page, or try to enter directly (example.com/classic) - then it doesn't load main scripts and styles (which are at /src/styles.sass by default)

💻Your Environment

Angular Version:

I'm using Angular v16

Scully Version:

"@scullyio/init": "^2.1.21",
"@scullyio/ng-lib": "^2.1.41",
"@scullyio/scully": "^2.1.41",
"@scullyio/scully-plugin-puppeteer": "^2.1.41",

Will appreciate any help. Thanks

[Denys Silberman]

Was able to handle the problem with routes by removing enum and function from app-routing and from other components, where they were used.
Although, the problem with styles and scripts are still there. If user proceeds directly to the page domain.com/core, it tries to get scripts and styles from 'domain.com/core/styles.css', while they are at 'domain.com/styles.css'

[Denys Silberman]

Solved the problem by rolling back to Angular 13. Seems like it's a problem with the latest Angular version (16)