docs: improve structure of docs app

Author: json-derulo

projects/angular-intl-demo/src/app/app.config.ts

@@ -0,0 +1,22 @@
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
+import { MarkdownModule } from 'ngx-markdown';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    importProvidersFrom(MarkdownModule.forRoot()),
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: {
+        subscriptSizing: 'dynamic',
+      },
+    },
+    provideAnimations(),
+    provideHttpClient(),
+    provideRouter(routes),
+  ],
+};

projects/angular-intl-demo/src/app/app.routes.ts

@@ -8,7 +8,6 @@ export const routes: Routes = [
   },
   {
     path: 'pipes',
-    loadComponent: () => import('./pipes/pipes.component'),
     loadChildren: () => import('./pipes/pipes.routes'),
   },
   {

projects/angular-intl-demo/src/app/pipes/pipes.component.ts

@@ -9,4 +9,4 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
   standalone: true,
   imports: [MatTabsModule, RouterLink, RouterLinkActive, RouterOutlet],
 })
-export default class PipesComponent {}
+export class PipesComponent {}

projects/angular-intl-demo/src/app/pipes/pipes.routes.ts

@@ -6,50 +6,57 @@ import { DecimalComponent } from './decimal/decimal.component';
 import { LanguageComponent } from './language/language.component';
 import { ListComponent } from './list/list.component';
 import { PercentComponent } from './percent/percent.component';
+import { PipesComponent } from './pipes.component';
 import { RelativeTimeComponent } from './relative-time/relative-time.component';
 import { UnitComponent } from './unit/unit.component';
 
 const routes: Routes = [
-  {
-    path: 'date',
-    component: DateComponent,
-  },
-  {
-    path: 'decimal',
-    component: DecimalComponent,
-  },
-  {
-    path: 'percent',
-    component: PercentComponent,
-  },
-  {
-    path: 'currency',
-    component: CurrencyComponent,
-  },
-  {
-    path: 'unit',
-    component: UnitComponent,
-  },
-  {
-    path: 'language',
-    component: LanguageComponent,
-  },
-  {
-    path: 'country',
-    component: CountryComponent,
-  },
-  {
-    path: 'list',
-    component: ListComponent,
-  },
-  {
-    path: 'relative-time',
-    component: RelativeTimeComponent,
-  },
   {
     path: '',
-    redirectTo: 'date',
-    pathMatch: 'full',
+    component: PipesComponent,
+    children: [
+      {
+        path: 'date',
+        component: DateComponent,
+      },
+      {
+        path: 'decimal',
+        component: DecimalComponent,
+      },
+      {
+        path: 'percent',
+        component: PercentComponent,
+      },
+      {
+        path: 'currency',
+        component: CurrencyComponent,
+      },
+      {
+        path: 'unit',
+        component: UnitComponent,
+      },
+      {
+        path: 'language',
+        component: LanguageComponent,
+      },
+      {
+        path: 'country',
+        component: CountryComponent,
+      },
+      {
+        path: 'list',
+        component: ListComponent,
+      },
+      {
+        path: 'relative-time',
+        component: RelativeTimeComponent,
+      },
+      {
+        path: '',
+        redirectTo: 'date',
+        pathMatch: 'full',
+      },
+    ],
   },
 ];
 

projects/angular-intl-demo/src/main.ts

@@ -1,26 +1,7 @@
-import { provideHttpClient } from '@angular/common/http';
-import { importProvidersFrom } from '@angular/core';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { bootstrapApplication } from '@angular/platform-browser';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { provideRouter } from '@angular/router';
-import { MarkdownModule } from 'ngx-markdown';
 import { AppComponent } from './app/app.component';
-import { routes } from './app/app.routes';
+import { appConfig } from './app/app.config';
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    importProvidersFrom(MarkdownModule.forRoot()),
-    {
-      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue: {
-        subscriptSizing: 'dynamic',
-      },
-    },
-    provideAnimations(),
-    provideHttpClient(),
-    provideRouter(routes),
-  ],
-}).catch((err) => {
+bootstrapApplication(AppComponent, appConfig).catch((err) => {
   console.error(err);
 });