fix(server): disable breakpoints correctly and avoid style overuse

This problem is two-fold. First, on the server, when we deactivated
breakpoints, we were deactivating them in the wrong order. This
meant that after a breakpoint was activated, its styles would
linger, polluting the correct state of the style map.

The second problem was overpopulation of styles. Essentially,
we would provide a fallback style for every single breakpoint
if available. This is redundant, because we already populate a
global activation state at the beginning of style population.

To resolve these issues, we ensure that we deactivate breakpoints
correctly, and we also disable fallback styles on the server after
the initial population is complete.

Author: CaerusKaru

angular.json

@@ -185,7 +185,7 @@
           "builder": "@angular-devkit/build-angular:server",
           "options": {
             "outputPath": "dist/universal-demo-app/server",
-            "main": "projects/apps/universal-demo-app/src/main.server.ts",
+            "main": "projects/apps/universal-demo-app/server.ts",
             "tsConfig": "projects/apps/universal-demo-app/tsconfig.server.json",
             "preserveSymlinks": true,
             "sourceMap": true,
@@ -203,6 +203,17 @@
             }
           }
         },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "defaultConfiguration": "production",
+          "options": {},
+          "configurations": {
+            "production": {
+              "browserTarget": "universal-demo-app:build:production",
+              "serverTarget": "universal-demo-app:server:production"
+            }
+          }
+        },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {

package.json

@@ -21,11 +21,16 @@
     "demo:serve": "ng serve demo-app",
     "stamp": "ts-node tools/package-tools/version-placeholders.ts --module=commonjs",
     "build:universal-demo-app": "ng run universal-demo-app:build:production && ng run universal-demo-app:server",
+    "serve:universal-demo-app": "ng run universal-demo-app:serve-ssr",
     "test": "ng test @angular/flex-layout",
     "test:ssr": "webpack --config test/webpack-spec-ssr-bundle.js && jasmine --config=test/jasmine-ssr.json",
     "lint": "stylelint projects/libs/**/*.scss --config=stylelint-config.json && tslint --project ./tsconfig.json --config tslint.json",
     "release": "yarn build && yarn stamp",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "dev:ssr": "ng run universal-demo-app:serve-ssr",
+    "serve:ssr": "node dist/universal-demo-app/server/main.js",
+    "build:ssr": "ng build && ng run universal-demo-app:server",
+    "prerender": "ng run universal-demo-app:prerender"
   },
   "private": true,
   "requiredAngularVersion": "^13.0.0",
@@ -40,8 +45,8 @@
     "@angular/platform-browser-dynamic": "~13.0.0",
     "@angular/platform-server": "~13.0.0",
     "@angular/router": "~13.0.0",
+    "@nguniversal/builders": "^13.0.1",
     "@nguniversal/express-engine": "^13.0.1",
-    "@types/express": "^4.17.13",
     "express": "^4.17.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
@@ -53,6 +58,8 @@
     "@angular/cli": "~13.0.0",
     "@angular/compiler-cli": "~13.0.0",
     "@ngtools/webpack": "^13.0.3",
+    "@nguniversal/builders": "^13.0.1",
+    "@types/express": "^4.17.0",
     "@types/jasmine": "~3.10.0",
     "@types/minimatch": "^3.0.5",
     "@types/node": "^12.11.1",

projects/apps/universal-demo-app/server.ts

@@ -0,0 +1,61 @@
+import 'zone.js/dist/zone-node';
+
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import { join } from 'path';
+
+import { AppServerModule } from './src/app/app.server.module';
+import { APP_BASE_HREF } from '@angular/common';
+import { existsSync } from 'fs';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const distFolder = join(process.cwd(), 'dist/universal-demo-app/browser');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+
+  // Our Universal express-engine (found at
+  // https://github.com/angular/universal/tree/master/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule,
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
+
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env['PORT'] || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = mainModule && mainModule.filename || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  run();
+}
+
+export * from './src/main.server';

projects/apps/universal-demo-app/tsconfig.server.json

@@ -11,6 +11,7 @@
     "entryModule": "app/app.server.module#AppServerModule"
   },
   "files": [
-    "src/main.server.ts"
+    "src/main.server.ts",
+    "server.ts"
   ]
 }

projects/libs/flex-layout/core/breakpoints/break-point-registry.ts

@@ -30,19 +30,19 @@ export class BreakPointRegistry {
    * Search breakpoints by alias (e.g. gt-xs)
    */
   findByAlias(alias: string): OptionalBreakPoint {
-    return !alias ? null : this.findWithPredicate(alias, (bp) => bp.alias == alias);
+    return !alias ? null : this.findWithPredicate(alias, (bp) => bp.alias === alias);
   }
 
   findByQuery(query: string): OptionalBreakPoint {
-    return this.findWithPredicate(query, (bp) => bp.mediaQuery == query);
+    return this.findWithPredicate(query, (bp) => bp.mediaQuery === query);
   }
 
   /**
    * Get all the breakpoints whose ranges could overlapping `normal` ranges;
    * e.g. gt-sm overlaps md, lg, and xl
    */
   get overlappings(): BreakPoint[] {
-    return this.items.filter(it => it.overlapping == true);
+    return this.items.filter(it => it.overlapping);
   }
 
   /**
@@ -58,7 +58,7 @@ export class BreakPointRegistry {
    * for property layoutGtSM.
    */
   get suffixes(): string[] {
-    return this.items.map(it => !!it.suffix ? it.suffix : '');
+    return this.items.map(it => it?.suffix ?? '');
   }
 
   /**
@@ -68,10 +68,10 @@ export class BreakPointRegistry {
       searchFn: (bp: BreakPoint) => boolean): OptionalBreakPoint {
     let response = this.findByMap.get(key);
     if (!response) {
-      response = this.items.find(searchFn) || null;
+      response = this.items.find(searchFn) ?? null;
       this.findByMap.set(key, response);
     }
-    return response || null;
+    return response ?? null;
 
   }
 

projects/libs/flex-layout/core/match-media/match-media.ts

@@ -49,7 +49,7 @@ export class MatchMedia implements OnDestroy {
    */
   isActive(mediaQuery: string): boolean {
     const mql = this.registry.get(mediaQuery);
-    return !!mql ? mql.matches : this.registerQuery(mediaQuery).some(m => m.matches);
+    return mql?.matches ?? this.registerQuery(mediaQuery).some(m => m.matches);
   }
 
   /**

projects/libs/flex-layout/core/media-marshaller/media-marshaller.ts

@@ -43,6 +43,7 @@ export interface ElementMatcher {
  */
 @Injectable({providedIn: 'root'})
 export class MediaMarshaller {
+  private _useFallbacks = true;
   private activatedBreakpoints: BreakPoint[] = [];
   private elementMap: ElementMap = new Map();
   private elementKeyMap: ElementKeyMap = new WeakMap();
@@ -53,7 +54,11 @@ export class MediaMarshaller {
   private subject: Subject<ElementMatcher> = new Subject();
 
   get activatedAlias(): string {
-    return this.activatedBreakpoints[0] ? this.activatedBreakpoints[0].alias : '';
+    return this.activatedBreakpoints[0]?.alias ?? '';
+  }
+
+  set useFallbacks(value: boolean) {
+    this._useFallbacks = value;
   }
 
   constructor(protected matchMedia: MatchMedia,
@@ -68,18 +73,20 @@ export class MediaMarshaller {
    */
   onMediaChange(mc: MediaChange) {
     const bp: BreakPoint | null = this.findByQuery(mc.mediaQuery);
+
     if (bp) {
       mc = mergeAlias(mc, bp);
 
-      if (mc.matches && this.activatedBreakpoints.indexOf(bp) === -1) {
+      const bpIndex = this.activatedBreakpoints.indexOf(bp);
+
+      if (mc.matches && bpIndex === -1) {
         this.activatedBreakpoints.push(bp);
         this.activatedBreakpoints.sort(sortDescendingPriority);
 
         this.updateStyles();
-
-      } else if (!mc.matches && this.activatedBreakpoints.indexOf(bp) !== -1) {
+      } else if (!mc.matches && bpIndex !== -1) {
         // Remove the breakpoint when it's deactivated
-        this.activatedBreakpoints.splice(this.activatedBreakpoints.indexOf(bp), 1);
+        this.activatedBreakpoints.splice(bpIndex, 1);
         this.activatedBreakpoints.sort(sortDescendingPriority);
 
         this.updateStyles();
@@ -193,7 +200,6 @@ export class MediaMarshaller {
           this.clearElement(el, k);
         }
       });
-
     });
   }
 
@@ -204,6 +210,7 @@ export class MediaMarshaller {
    */
   clearElement(element: HTMLElement, key: string): void {
     const builders = this.clearMap.get(element);
+
     if (builders) {
       const clearFn: ClearCallback = builders.get(key) as ClearCallback;
       if (!!clearFn) {
@@ -316,12 +323,20 @@ export class MediaMarshaller {
     for (let i = 0; i < this.activatedBreakpoints.length; i++) {
       const activatedBp = this.activatedBreakpoints[i];
       const valueMap = bpMap.get(activatedBp.alias);
+
       if (valueMap) {
         if (key === undefined || (valueMap.has(key) && valueMap.get(key) != null)) {
           return valueMap;
         }
       }
     }
+
+    // On the server, we explicitly have an "all" section filled in to begin with.
+    // So we don't need to aggressively find a fallback if no explicit value exists.
+    if (!this._useFallbacks) {
+      return undefined;
+    }
+
     const lastHope = bpMap.get('');
     return (key === undefined || lastHope && lastHope.has(key)) ? lastHope : undefined;
   }
@@ -347,14 +362,11 @@ export class MediaMarshaller {
 function initBuilderMap(map: BuilderMap,
                         element: HTMLElement,
                         key: string,
-                        input?: UpdateCallback | ClearCallback): void {
+                        input?: Builder): void {
   if (input !== undefined) {
-    let oldMap = map.get(element);
-    if (!oldMap) {
-      oldMap = new Map();
-      map.set(element, oldMap);
-    }
+    const oldMap = map.get(element) ?? new Map();
     oldMap.set(key, input);
+    map.set(element, oldMap);
   }
 }
 

projects/libs/flex-layout/extended/style/style.ts

@@ -62,7 +62,7 @@ export class StyleDirective extends BaseDirective2 implements DoCheck {
       this.ngStyleInstance = new NgStyle(elementRef, differs, renderer2);
     }
     this.init();
-    const styles = this.nativeElement.getAttribute('style') || '';
+    const styles = this.nativeElement.getAttribute('style') ?? '';
     this.fallbackStyles = this.buildStyleMap(styles);
     this.isServer = serverLoaded && isPlatformServer(platformId);
   }
@@ -92,7 +92,7 @@ export class StyleDirective extends BaseDirective2 implements DoCheck {
   protected buildStyleMap(styles: NgStyleType): NgStyleMap {
     // Always safe-guard (aka sanitize) style property values
     const sanitizer: NgStyleSanitizer = (val: any) =>
-      this.sanitizer.sanitize(SecurityContext.STYLE, val) || '';
+      this.sanitizer.sanitize(SecurityContext.STYLE, val) ?? '';
     if (styles) {
       switch (getType(styles)) {
         case 'string':  return buildMapFromList(buildRawList(styles),

projects/libs/flex-layout/server/server-match-media.ts

@@ -78,27 +78,13 @@ export class ServerMediaQueryList implements MediaQueryList {
   }
 
   /** Don't need to remove listeners in the server environment */
-  removeListener(_: MediaQueryListListener | null) {
+  removeListener() {
   }
 
-  addEventListener<K extends keyof
-    MediaQueryListEventMap>(_: K,
-                            __: (this: MediaQueryList,
-                                 ev: MediaQueryListEventMap[K]) => any,
-                            ___?: boolean | AddEventListenerOptions): void;
-  addEventListener(_: string,
-                   __: EventListenerOrEventListenerObject,
-                   ___?: boolean | AddEventListenerOptions) {
+  addEventListener() {
   }
 
-  removeEventListener<K extends keyof
-    MediaQueryListEventMap>(_: K,
-                            __: (this: MediaQueryList,
-                                 ev: MediaQueryListEventMap[K]) => any,
-                            ___?: boolean | EventListenerOptions): void;
-  removeEventListener(_: string,
-                      __: EventListenerOrEventListenerObject,
-                      ___?: boolean | EventListenerOptions) {
+  removeEventListener() {
   }
 
   dispatchEvent(_: Event): boolean {