I'm using scully for prerendering bunch of routes, and I skip routes for /board/:boardId
:
routes: {
"/board": {
type: 'ignored'
}
},
extraRoutes: ["/",
"/dashboard",
"/uses"
]
The /board route is dynamic, i.e. it looks like /board/[user-generated-boardId], but when I navigate to it using npx scully serve
, It breaks, e.g.
I don't want to prerender /board/:boardId routes, and they should work just like an angular SPA, but seems like scully server is trying to map them to a directory path within dist
.
Any suggestion on how I can get both static and dynamic routes working with scully, would be great ! Thanks.
When Scully can not find a route it should default to the expected Angular client side rendered page generation. To take advantage of some of the benefits of static pages and Scully you could generated a base page for dynamic routes tell Scully to ignore the remainder of the dynamic route.
Example is turning this routing-module path:
const routes: Routes = [
{ path: 'stuff/:id', component: StuffComponent },
];
Into two routes where one is generated and the other is ignored:
const routes: Routes = [
{ path: 'stuff', component: StuffComponent },
{ path: 'stuff/:id', component: StuffComponent },
];
Don't forget to ignore the dynamic route in your scully.app-name.config.ts
export const config: ScullyConfig = {
projectRoot: './src',
projectName: 'app-name',
outDir: './dist/static',
routes: {
'/stuff/:id': {
type: 'ignored',
},
},
};
If you need to turn OFF or ON specific content when either running or generating utilize Scully's 2 utility methods isScullyRunning() & isScullyGenerated()
WARNING
By design the Scully dev server WILL NOT LOAD DYNAMIC ROUTES. That is, if you follow the above approach npx scully serve
will still result in the Cannot GET ...
error. You will have to use a fully featured server to run to see the results. For example in your terminal:
cd dist/static
npx http-server