Attempt to make app.component standalone to match ng new --ssr outp…

…ut and thus enable SSR support

src/app/app.component.ts

@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { Subject } from "rxjs";
+import { AppImports } from "./app.module";
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: AppImports as Array<any>, // [RouterOutlet].concat(AppImports as Array<any>),
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
   title = "ng-material-scaffold";

src/app/app.config.server.ts

@@ -0,0 +1,11 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering()
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/app.config.ts

@@ -0,0 +1,10 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideClientHydration } from '@angular/platform-browser';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
+import { routes } from './app.routes.module';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes), provideClientHydration(), provideAnimationsAsync()]
+};

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { ApplicationConfig, Component, ModuleWithProviders, NgModule, Provider, Type } from '@angular/core';
 import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
@@ -22,39 +22,47 @@ import { AppRoutingModule } from './app.routes.module';
 import { AppComponent } from './app.component';
 import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
 
+const alert_module = AlertsModule.forRoot();
+
+export const AppImports: /*NgModule*/Component["imports"] = [
+  BrowserModule,
+  // AppRoutingModule,
+  BrowserAnimationsModule,
+  HttpClientModule,
+  LayoutModule,
+  BrowserAnimationsModule,
+  MatToolbarModule,
+  MatButtonModule,
+  MatSidenavModule,
+  MatIconModule,
+  MatListModule,
+  MatGridListModule,
+  MatCardModule,
+  MatMenuModule,
+  alert_module as any,
+  SidenavModule
+];
+
+export const AppProviders: ApplicationConfig["providers"] /*NgModule["providers"]*/ = [
+  AuthGuard,
+  {
+    provide: HTTP_INTERCEPTORS,
+    useClass: AuthInterceptor,
+    multi: true,
+  },
+  // provideClientHydration(),
+  // provideAnimationsAsync()
+];
+
+/*
 @NgModule({
   declarations: [
     AppComponent
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
-    LayoutModule,
-    BrowserAnimationsModule,
-    MatToolbarModule,
-    MatButtonModule,
-    MatSidenavModule,
-    MatIconModule,
-    MatListModule,
-    MatGridListModule,
-    MatCardModule,
-    MatMenuModule,
-    AlertsModule.forRoot(),
-    SidenavModule
-  ],
-  providers: [
-    AuthGuard,
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: AuthInterceptor,
-      multi: true,
-    },
-    provideClientHydration(),
-    provideAnimationsAsync()
-  ],
+  imports: AppImports,
+  providers: AppProviders,
   bootstrap: [AppComponent]
 })
 export class AppModule {
 }
+*/

src/app/app.routes.module.ts

@@ -4,7 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from './auth/auth.guard';
 
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
@@ -28,8 +28,11 @@ const routes: Routes = [
 
 export const getRedirectUrl = (url: string): string | null => new URLSearchParams(url.slice(1)).get('redirectUrl');
 
+// Separate var until https://github.com/angular/angular/issues/38376 is closed
+const rootModule = RouterModule.forRoot(routes, {});
+
 @NgModule({
-  imports: [RouterModule.forRoot(routes, {})],
+  imports: [rootModule],
   exports: [RouterModule]
 })
 export class AppRoutingModule {

src/index.html

@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>

src/main.server.ts

@@ -1,8 +1,7 @@
-import { provideServerRendering, renderModule } from "@angular/platform-server"
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
 
-import { AppModule } from "./app/app.module";
-
-const bootstrap = () => renderModule(AppModule, {extraProviders: [provideServerRendering()]});
-// bootstrapApplication(AppComponent, config);
+const bootstrap = () => bootstrapApplication(AppComponent, config);
 
 export default bootstrap;

src/main.ts

@@ -1,6 +1,6 @@
-import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from "./app/app.module";
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));