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

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,6 +21,7 @@
     "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",
@@ -40,8 +41,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 +54,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,59 @@
+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';
+
+  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 {