feat: convert demo app to Angular 19 standalone architecture

  - Convert from NgModule to standalone component architecture
  - Update main.ts to use bootstrapApplication with providers
  - Create app.routes.ts for lazy-loaded routing
  - Convert all demo components to standalone with proper imports
  - Fix angular.json configuration (browserTarget -> buildTarget)
  - Replace deprecated @angular/flex-layout with CSS Flexbox
  - Add comprehensive flex-layout.scss replacement
  - Update all component templates to use CSS classes
  - Fix HTTP interceptor configuration with withInterceptorsFromDi()
  - Add missing Angular Material modules
  - Convert form field placeholders to proper mat-label elements
  - Fix toolbar button icon alignment with MDI icons
  - Remove unused imports and fix lint warnings

Author: t-ho

.eslintrc.json

@@ -73,18 +73,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "ngx-ui-loader-app:build:production"
+              "buildTarget": "ngx-ui-loader-app:build:production"
             },
             "development": {
-              "browserTarget": "ngx-ui-loader-app:build:development"
+              "buildTarget": "ngx-ui-loader-app:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "ngx-ui-loader-app:build"
+            "buildTarget": "ngx-ui-loader-app:build"
           }
         },
         "test": {

angular.json

@@ -0,0 +1,59 @@
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsparser from '@typescript-eslint/parser';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
+
+export default [
+  {
+    ignores: ['dist/**/*', 'node_modules/**/*'],
+  },
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        project: ['tsconfig.json'],
+        createDefaultProgram: true,
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      '@angular-eslint': angular,
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      ...angular.configs.recommended.rules,
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+  {
+    files: ['**/*.html'],
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    rules: {
+      ...angularTemplate.configs.recommended.rules,
+    },
+  },
+];

eslint.config.js

@@ -24,35 +24,19 @@
 
 <div ngxUiLoaderBlurred [blur]="demoService.config.blur">
   <mat-toolbar color="primary">
-    <span>
-      <a mat-button href="https://tdev.app/ngx-ui-loader">
-        <mat-icon
-          fontIcon="mdi-book-open-page-variant"
-          fontSet="mdi"
-          class="mdi-24px"
-        ></mat-icon>
-        DOCUMENTATION
-      </a>
-    </span>
+    <button mat-button (click)="openDocumentation()">
+      <mat-icon inline class="mdi mdi-book-open-page-variant"></mat-icon>
+      DOCUMENTATION
+    </button>
     <span class="fill-space"></span>
-    <span>
-      <a
-        mat-button
-        href="https://github.com/t-ho/ngx-ui-loader"
-        target="_blank"
-      >
-        <mat-icon
-          fontIcon="mdi-github"
-          fontSet="mdi"
-          class="mdi-24px"
-        ></mat-icon
-        >Github
-      </a>
-    </span>
+    <button mat-button (click)="openGithub()">
+      <mat-icon inline class="mdi mdi-github"></mat-icon>
+      Github
+    </button>
   </mat-toolbar>
 
   <h2>NGX-UI-LOADER</h2>
-  <div fxLayout="row wrap" fxLayoutAlign="center" fxLayoutGap="8px">
+  <div class="layout-row-wrap fxLayoutAlign-center" style="gap: 8px;">
     <a href="https://www.npmjs.com/package/ngx-ui-loader" target="_blank">
       <img
         alt="NPM Version"

src/app/app.component.html

@@ -29,10 +29,8 @@ mat-slider {
   padding: 12px;
 }
 
-.mat-icon.mdi-24px {
-  line-height: 24px;
-  margin-right: 4px;
-  margin-bottom: 3px;
+mat-toolbar mat-icon.mdi {
+  font-size: 18px;
 }
 
 .config-info {

src/app/app.component.scss

@@ -1,18 +1,38 @@
 import { Component, ViewContainerRef } from '@angular/core';
+import { NgxUiLoaderModule } from 'ngx-ui-loader';
+import { RouterOutlet } from '@angular/router';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
 
 import { DemoService } from './demo.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  imports: [
+    NgxUiLoaderModule,
+    RouterOutlet,
+    MatToolbarModule,
+    MatIconModule,
+    MatButtonModule,
+  ],
 })
 export class AppComponent {
   /**
    * Constructor
    */
   constructor(
     public demoService: DemoService,
-    public vcRef: ViewContainerRef
+    public vcRef: ViewContainerRef,
   ) {}
+
+  openDocumentation() {
+    window.open('https://tdev.app/ngx-ui-loader', '_blank');
+  }
+
+  openGithub() {
+    window.open('https://github.com/t-ho/ngx-ui-loader', '_blank');
+  }
 }

src/app/app.component.ts

@@ -0,0 +1,30 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: 'spinners',
+    loadComponent: () =>
+      import('./spinners/spinners.component').then((m) => m.SpinnersComponent),
+  },
+  {
+    path: 'multiloaders',
+    loadComponent: () =>
+      import('./multiloaders/multiloaders.component').then(
+        (m) => m.MultiloadersComponent,
+      ),
+  },
+  {
+    path: 'custom-template',
+    loadComponent: () =>
+      import('./custom-template/custom-template.component').then(
+        (m) => m.CustomTemplateComponent,
+      ),
+  },
+  {
+    path: '',
+    loadComponent: () =>
+      import('./master-configuration/master-configuration.component').then(
+        (m) => m.MasterConfigurationComponent,
+      ),
+  },
+];

src/app/app.module.ts

@@ -1,4 +1,4 @@
-<mat-list role="list" fxFlex="100" *ngIf="loader">
+<mat-list role="list" class="fxFlex-100" *ngIf="loader">
   <h3>
     <code>loaderId = "{{ loader.loaderId }}"</code>
     {{ loader.isMaster ? "- (master loader)" : "" }}