angularprerenderscullyscullyioangular-scully

Scully.io Prerenders only ROOT route as static file but does not prerender ANY other routes


We have set up of entire Angular 14.2.12 application in Production working just fine. I wanted to generate some of static pages using Scully, so I added Scully by following steps

ng add @scullyio/init

This installed scully in my project

Then, I ran "ng build" and "npx scully",

So, Scully recognized only the ROOT route (LandingPageComponent) and scully created index.html file for the root.
...But as per my below routing file, my app has many other routes, but scully is not recoginzing those other routes and is not generating any other static files.

Can you please reivew the below configuration and let me know what am I missing or where is my mistake?


Here is my src/app/app-routing.module.ts

@NgModule({
        imports: [
                RouterModule.forRoot([
                        { 
                                path: 'price', component: PriceComponent
                        },
                        {
                                path: 'privacy-policy', component: PrivacyPolicyComponent
                        },
                        {
                                path: 'legal-questions', component: LegalQuestionsComponent
                        },
                        {
                                path: 'training', component: TrainingComponent
                        },  
                        { path: '', component: LandingPageComponent },
                        { path: '**', component: LandingPageComponent },
                        { path: '', redirectTo: './app.component', pathMatch: 'full' },
                ], {
    enableTracing: false,
    onSameUrlNavigation: 'reload',
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    relativeLinkResolution: 'legacy'
})     
        ],
        exports: [
                RouterModule
        ],
        declarations: []
})
export class AppRoutingModule { }

Here is scully config file

test/scully.test.config.ts

import { ScullyConfig } from '@scullyio/scully';

import '@scullyio/scully-plugin-puppeteer'

export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "test",
  distFolder: './dist/test',
  outDir: './dist/static',
  routes: {
  }
};

Thank you in advance for your help. Cheers!


Solution

  • You need to tell the path to render specific route with extraRoutes in scully.projectname.config.ts

    import { ScullyConfig } from '@scullyio/scully';
    
    export const config: ScullyConfig = {
      projectRoot: './src',
      projectName: 'projectname',
      outDir: './dist/static',
      routes: {},
      extraRoutes: ['/price', '/privacy-policy', ... ] // add extra routes here
    };
    

    Hope this helps!