docs: refactor docs app

.gitignore

@@ -36,6 +36,7 @@ yarn-error.log
 /libpeerconnection.log
 testem.log
 /typings
+/.nx
 
 # System files
 .DS_Store

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

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButton } from '@angular/material/button';
+import { MatToolbar } from '@angular/material/toolbar';
 import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,
-  imports: [MatToolbarModule, MatButtonModule, RouterLink, RouterOutlet],
+  imports: [RouterLink, RouterOutlet, MatToolbar, MatButton],
 })
 export class AppComponent {}

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

@@ -0,0 +1,18 @@
+import { Routes } from '@angular/router';
+import { GettingStartedComponent } from './getting-started/getting-started.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: GettingStartedComponent,
+  },
+  {
+    path: 'pipes',
+    loadComponent: () => import('./pipes/pipes.component'),
+    loadChildren: () => import('./pipes/pipes.routes'),
+  },
+  {
+    path: '**',
+    redirectTo: '/',
+  },
+];

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

@@ -1,11 +1,6 @@
 import { Component } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
-import {
-  ActivatedRoute,
-  RouterLink,
-  RouterLinkActive,
-  RouterOutlet,
-} from '@angular/router';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-pipes',
@@ -14,6 +9,4 @@ import {
   standalone: true,
   imports: [MatTabsModule, RouterLink, RouterLinkActive, RouterOutlet],
 })
-export class PipesComponent {
-  constructor(readonly route: ActivatedRoute) {}
-}
+export default class PipesComponent {}

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

@@ -0,0 +1,56 @@
+import { Routes } from '@angular/router';
+import { CountryComponent } from './country/country.component';
+import { CurrencyComponent } from './currency/currency.component';
+import { DateComponent } from './date/date.component';
+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 { 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',
+  },
+];
+
+export default routes;

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

@@ -1,34 +1,25 @@
-import {
-  provideHttpClient,
-  withInterceptorsFromDi,
-} from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
 import { importProvidersFrom } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
 import { MarkdownModule } from 'ngx-markdown';
-import { AppRoutingModule } from './app/app-routing.module';
 import { AppComponent } from './app/app.component';
+import { routes } from './app/app.routes';
 
 bootstrapApplication(AppComponent, {
   providers: [
-    importProvidersFrom(
-      BrowserModule,
-      AppRoutingModule,
-      MarkdownModule.forRoot(),
-      MatToolbarModule,
-      MatButtonModule,
-    ),
+    importProvidersFrom(MarkdownModule.forRoot()),
     {
       provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
       useValue: {
         subscriptSizing: 'dynamic',
       },
     },
     provideAnimations(),
-    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClient(),
+    provideRouter(routes),
   ],
 }).catch((err) => {
   console.error(err);