feat: switch to full standalone mode

angular.json

@@ -86,7 +86,8 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "statsJson": true
             },
             "development": {
               "buildOptimizer": false,
@@ -146,7 +147,8 @@
         "prerender": {
           "builder": "@nguniversal/builders:prerender",
           "options": {
-            "routes": ["/", "/home", "/about", "/skills", "/work", "/contact", "/legal-notice"]
+            "routes": ["/", "/home", "/skills", "/work", "/contact", "/legal-notice"],
+            "guessRoutes": false
           },
           "defaultConfiguration": "production",
           "configurations": {

package.json

@@ -15,6 +15,7 @@
     "changelog": "standard-changelog -r 1"
   },
   "private": true,
+  "sideEffects": false,
   "prettier": "@pascaliske/prettier-config",
   "dependencies": {
     "@angular/animations": "^16.1.1",

server.ts

@@ -4,9 +4,9 @@ import { ngExpressEngine } from '@nguniversal/express-engine'
 import * as express from 'express'
 import { existsSync } from 'fs'
 import { join } from 'path'
-import { AppServerModule } from './src/main.server'
+import bootstrap from './src/main.server'
 
-export * from './src/main.server'
+export default bootstrap
 
 export function app(): express.Express {
     const server: express.Express = express()
@@ -16,7 +16,7 @@ export function app(): express.Express {
         : 'index'
 
     // prepare view engine
-    server.engine('html', ngExpressEngine({ bootstrap: AppServerModule }))
+    server.engine('html', ngExpressEngine({ bootstrap }))
     server.set('view engine', 'html')
     server.set('views', distFolder)
 

src/app/app.component.ts

@@ -1,12 +1,25 @@
 import { Component, OnInit, DestroyRef, inject } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { RouterOutlet } from '@angular/router'
+import { NgProgressModule } from 'ngx-progressbar'
 import { ThemeService } from 'shared/theme/theme.service'
+import { NavigationComponent } from 'components/navigation/navigation.component'
+import { FooterComponent } from 'components/footer/footer.component'
+import { TriangleComponent } from 'components/triangle/triangle.component'
 import { animations } from './app.animations'
 
 @Component({
+    standalone: true,
     selector: 'cmp-root',
     templateUrl: './app.component.html',
     styleUrls: [],
+    imports: [
+        RouterOutlet,
+        NgProgressModule,
+        NavigationComponent,
+        FooterComponent,
+        TriangleComponent,
+    ],
     animations,
 })
 export class AppComponent implements OnInit {

src/app/app.config.server.ts

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

src/app/app.config.ts

@@ -0,0 +1,28 @@
+import { importProvidersFrom, ApplicationConfig, ValueProvider, APP_ID } from '@angular/core'
+import { BrowserModule, provideClientHydration } from '@angular/platform-browser'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import { provideRouter } from '@angular/router'
+import { NgProgressModule } from 'ngx-progressbar'
+import { NgProgressHttpModule } from 'ngx-progressbar/http'
+import { NgProgressRouterModule } from 'ngx-progressbar/router'
+import { features, routes } from './app.routing'
+
+export const provideAppId: () => ValueProvider = (): ValueProvider => ({
+    provide: APP_ID,
+    useValue: 'pascaliske-dev',
+})
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        importProvidersFrom(
+            BrowserModule,
+            NgProgressModule.withConfig({ color: '#ff6666', fixed: true }),
+            NgProgressHttpModule,
+            NgProgressRouterModule,
+        ),
+        provideClientHydration(),
+        provideAnimations(),
+        provideRouter(routes, ...features),
+        provideAppId(),
+    ],
+}

src/app/app-routing.module.ts → src/app/app.routing.ts

@@ -1,7 +1,16 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
+import type { RouterFeatures, Routes } from '@angular/router'
+import { withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router'
 import { RedirectGuardFn } from 'shared/redirect/redirect.guard'
 
+export const features: RouterFeatures[] = [
+    withEnabledBlockingInitialNavigation(),
+    withInMemoryScrolling({
+        anchorScrolling: 'enabled',
+        scrollPositionRestoration: 'enabled',
+        // scrollOffset: [0, 100],
+    }),
+]
+
 export const routes: Routes = [
     {
         path: '',
@@ -58,16 +67,3 @@ export const routes: Routes = [
         redirectTo: 'home',
     },
 ]
-
-@NgModule({
-    imports: [
-        RouterModule.forRoot(routes, {
-            anchorScrolling: 'enabled',
-            scrollPositionRestoration: 'enabled',
-            scrollOffset: [0, 100],
-            initialNavigation: 'enabledBlocking',
-        }),
-    ],
-    exports: [RouterModule],
-})
-export class AppRoutingModule {}

src/main.server.ts

@@ -1 +1,10 @@
-export { AppServerModule } from './app/app.server.module'
+import { ApplicationRef } from '@angular/core'
+import { bootstrapApplication } from '@angular/platform-browser'
+import { AppComponent } from './app/app.component'
+import { serverConfig } from './app/app.config.server'
+
+export const bootstrap: () => Promise<ApplicationRef> = () => {
+    return bootstrapApplication(AppComponent, serverConfig)
+}
+
+export default bootstrap

src/main.ts

@@ -1,12 +1,7 @@
-import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
-import { AppModule } from './app/app.module'
-import { environment } from './environments/environment'
+import { bootstrapApplication } from '@angular/platform-browser'
+import { AppComponent } from './app/app.component'
+import { appConfig } from './app/app.config'
 
-if (environment.production) {
-    enableProdMode()
-}
-
-platformBrowserDynamic()
-    .bootstrapModule(AppModule)
-    .catch(err => console.error(err))
+bootstrapApplication(AppComponent, appConfig).catch(err => {
+    console.error(err)
+})