fix(router): make withExtraRoutes function public (#1446)

apps/analog-app/src/app/about.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  template: `About Store`,
+})
+export default class AboutComponent {}

apps/analog-app/src/app/app.config.ts

@@ -8,12 +8,23 @@ import {
   provideClientHydration,
   withEventReplay,
 } from '@angular/platform-browser';
-import { provideFileRouter, requestContextInterceptor } from '@analogjs/router';
+import {
+  provideFileRouter,
+  withExtraRoutes,
+  requestContextInterceptor,
+} from '@analogjs/router';
 import { withNavigationErrorHandler } from '@angular/router';
 
+const fallbackRoutes = [
+  { path: 'about', loadComponent: () => import('./about') },
+];
+
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideFileRouter(withNavigationErrorHandler(console.error)),
+    provideFileRouter(
+      withNavigationErrorHandler(console.error),
+      withExtraRoutes(fallbackRoutes)
+    ),
     provideHttpClient(
       withFetch(),
       withInterceptors([requestContextInterceptor])

apps/docs-app/docs/features/routing/overview.md

@@ -337,3 +337,25 @@ The filesystem-based router will generate the following routes:
 | `/products/1`      | `products/[productId].page.ts` (layout: `products.page.ts`)      |
 | `/products/1/edit` | `products/[productId].edit.page.ts` (layout: `products.page.ts`) |
 | `/unknown-url`     | `[...not-found].md`                                              |
+
+## Providing Extra Routes
+
+Routes can be added manually in addition to the routes discovered through the filesystem. Use the `withExtraRoutes` with an array of routes to be prepended to the discovered routes array. All the routes are merged into a single array.
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { Routes } from '@angular/router';
+import { provideFileRouter, withExtraRoutes } from '@analogjs/router';
+
+const customRoutes: Routes = [
+  {
+    path: '/custom',
+    loadComponent: () =>
+      import('./custom-component').then((m) => m.CustomComponent),
+  },
+];
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideFileRouter(withExtraRoutes(customRoutes))],
+};
+```

packages/router/src/index.ts

@@ -7,7 +7,7 @@ export {
   injectRouter,
 } from './lib/define-route';
 export { RouteMeta } from './lib/models';
-export { provideFileRouter } from './lib/provide-file-router';
+export { provideFileRouter, withExtraRoutes } from './lib/provide-file-router';
 export { MetaTag } from './lib/meta-tags';
 export { PageServerLoad, LoadResult } from './lib/route-types';
 export { injectLoad } from './lib/inject-load';

packages/router/src/lib/provide-file-router.ts

@@ -24,8 +24,12 @@ declare const ANALOG_API_PREFIX: string;
 export function provideFileRouter(
   ...features: RouterFeatures[]
 ): EnvironmentProviders {
+  const extraRoutesFeature = features.filter((feat) => feat.ɵkind >= 100);
+  const routerFeatures = features.filter((feat) => feat.ɵkind < 100);
+
   return makeEnvironmentProviders([
-    provideRouter(routes, ...features),
+    extraRoutesFeature.map((erf) => erf.ɵproviders),
+    provideRouter(routes, ...routerFeatures),
     {
       provide: ENVIRONMENT_INITIALIZER,
       multi: true,
@@ -47,11 +51,15 @@ export function provideFileRouter(
   ]);
 }
 
-export function withExtraRoutes(routes: Routes): RouterFeatures[] {
-  return [
-    {
-      ɵkind: 100 as any,
-      ɵproviders: [{ provide: ROUTES, useValue: routes }],
-    },
-  ];
+/**
+ * Provides extra custom routes in addition to the routes
+ * discovered from the filesystem-based routing. These routes are
+ * inserted before the filesystem-based routes, and take priority in
+ * route matching.
+ */
+export function withExtraRoutes(routes: Routes): RouterFeatures {
+  return {
+    ɵkind: 100 as number,
+    ɵproviders: [{ provide: ROUTES, useValue: routes, multi: true }],
+  };
 }

packages/router/src/lib/routes.ts

@@ -181,7 +181,7 @@ function toRoutes(rawRoutes: RawRoute[], files: Files): Route[] {
           path: rawRoute.segment,
           loadChildren: () =>
             module!().then((m) => {
-              if (!import.meta.env.PROD) {
+              if (import.meta.env.DEV) {
                 const hasModuleDefault = !!m.default;
                 const hasRedirect = !!m.routeMeta?.redirectTo;