feat(router): add filesystem-based routing support for .ng files (#839)

apps/ng-app/src/app/app.component.ng

@@ -1,16 +1,18 @@
 <script lang="ts">
   import { inject, signal, effect, computed } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
-  import Hello from './hello.ng';
-  import AnotherOne from './another-one.ng';
   import { JsonPipe } from '@angular/common';
+  import { RouterOutlet, RouterLink } from '@angular/router';
   import { delay } from 'rxjs';
+
+  import Hello from './hello.ng';
+  import AnotherOne from './another-one.ng';
   import Highlight from './highlight.ng';
   import { HelloOriginal } from './hello';
 
   defineMetadata({
     selector: 'app-root',
-    imports: [JsonPipe, HelloOriginal],
+    imports: [JsonPipe, HelloOriginal, RouterOutlet, RouterLink],
     exposes: [Math],
   });
 
@@ -65,6 +67,14 @@
   } @else {
   <p>Loading todo...</p>
   }
+
+  <br/>
+
+  <a routerLink="/">Home</a> | <a routerLink="/about">About</a>
+
+  <br/>
+
+  <router-outlet />
 </template>
 
 <style>

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

@@ -1,6 +1,7 @@
+import { provideFileRouter } from '@analogjs/router';
 import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient()],
+  providers: [provideFileRouter(), provideHttpClient()],
 };

apps/ng-app/src/app/pages/(home).page.ng

@@ -0,0 +1 @@
+<template> Welcome Home </template>

apps/ng-app/src/app/pages/about.page.ng

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Hello from '../hello.ng';
+</script>
+
+<template>
+  About me works!
+
+  <Hello />
+</template>

packages/router/src/lib/routes.ts

@@ -12,6 +12,7 @@ const FILES = import.meta.glob<RouteExport>([
   '/app/routes/**/*.ts',
   '/src/app/routes/**/*.ts',
   '/src/app/pages/**/*.page.ts',
+  '/src/app/pages/**/*.page.ng',
 ]);
 
 const CONTENT_FILES = import.meta.glob<string>(
@@ -123,7 +124,7 @@ function toRawPath(filename: string): string {
   return filename
     .replace(
       // convert to relative path and remove file extension
-      /^\/(.*?)\/routes\/|^\/(.*?)\/pages\/|\/app\/routes\/|(\.page\.(js|ts)$)|(\.(ts|md)$)/g,
+      /^\/(.*?)\/routes\/|^\/(.*?)\/pages\/|\/app\/routes\/|(\.page\.(js|ts|ng)$)|(\.(ts|md|ng)$)/g,
       ''
     )
     .replace(/\[\.{3}.+\]/, '**') // [...not-found] => **
@@ -156,13 +157,13 @@ function toRoutes(rawRoutes: RawRoute[], files: Files): Route[] {
         : (files[rawRoute.filename] as () => Promise<RouteExport>);
 
       const endpointKey = rawRoute.filename.replace(
-        /\.page\.ts$/,
+        /\.page\.(ts|ng)$/,
         ENDPOINT_EXTENSION
       );
 
       // get endpoint path
       const rawEndpoint = rawRoute.filename
-        .replace(/\.page\.ts$/, '')
+        .replace(/\.page\.(ts|ng)$/, '')
         .replace(/\[\.{3}.+\]/, '**') // [...not-found] => **
         .split(APP_DIR)[1];