feat(upgrade): upgrade to 18.1

Author: DuncanFaulkner

.circleci/config.yml

@@ -9,7 +9,7 @@
 # To validate changes, use an online parser, eg.
 # http://yaml-online-parser.appspot.com/
 
-var_1: &docker_image cimg/node:18.18.2
+var_1: &docker_image cimg/node:20.15.1
 var_2: &cache_key v2-ng-layout-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.7.0
 
 # Settings common to each job
@@ -53,7 +53,7 @@ var_8: &docker-firefox-image
   # TODO(devversion): Temporarily use a image that includes Firefox 62 because the
   # ngcontainer image does include an old Firefox version that does not support headless.
   # See the PR that fixes this: https://github.com/angular/angular/pull/26435
-  - image: cimg/node:18.18.2-browsers
+  - image: cimg/node:20.15.1-browsers
 
 # Attaches the release output which has been stored in the workspace to the current job.
 # https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs

angular.json

@@ -39,19 +39,23 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/apps/demo-app",
+            "outputPath": {
+              "base": "dist/apps/demo-app"
+            },
             "index": "projects/apps/demo-app/src/index.html",
-            "main": "projects/apps/demo-app/src/main.ts",
-            "polyfills": "projects/apps/demo-app/src/polyfills.ts",
+            "polyfills": [
+              "projects/apps/demo-app/src/polyfills.ts"
+            ],
             "tsConfig": "projects/apps/demo-app/tsconfig.app.json",
             "assets": [
               "projects/apps/demo-app/src/favicon.ico",
               "projects/apps/demo-app/src/assets"
             ],
             "styles": ["projects/apps/demo-app/src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "browser": "projects/apps/demo-app/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -76,9 +80,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -134,19 +136,30 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/universal-demo-app/browser",
+            "outputPath": {
+              "base": "dist/universal-demo-app"
+            },
             "index": "projects/apps/universal-demo-app/src/index.html",
-            "main": "projects/apps/universal-demo-app/src/main.ts",
-            "polyfills": "projects/apps/universal-demo-app/src/polyfills.ts",
+            "polyfills": [
+              "projects/apps/universal-demo-app/src/polyfills.ts"
+            ],
             "tsConfig": "projects/apps/universal-demo-app/tsconfig.app.json",
             "assets": [
               "projects/apps/universal-demo-app/src/favicon.ico",
               "projects/apps/universal-demo-app/src/assets"
             ],
-            "styles": ["projects/apps/universal-demo-app/src/styles.scss"],
-            "scripts": []
+            "styles": [
+              "projects/apps/universal-demo-app/src/styles.scss"
+            ],
+            "scripts": [],
+            "browser": "projects/apps/universal-demo-app/src/main.ts",
+            "server": "projects/apps/universal-demo-app/src/main.server.ts",
+            "prerender": true,
+            "ssr": {
+              "entry": "projects/apps/universal-demo-app/server.ts"
+            }
           },
           "configurations": {
             "production": {
@@ -171,51 +184,14 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
             }
           },
           "defaultConfiguration": "production"
         },
-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
-          "options": {
-            "outputPath": "dist/universal-demo-app/server",
-            "main": "projects/apps/universal-demo-app/server.ts",
-            "tsConfig": "projects/apps/universal-demo-app/tsconfig.server.json",
-            "preserveSymlinks": true,
-            "sourceMap": true,
-            "optimization": false,
-            "buildOptimizer": false
-          },
-          "configurations": {
-            "production": {
-              "optimization": true,
-              "fileReplacements": [
-                {
-                  "replace": "projects/apps/universal-demo-app/src/environments/environment.ts",
-                  "with": "projects/apps/universal-demo-app/src/environments/environment.prod.ts"
-                }
-              ],
-              "buildOptimizer": true
-            }
-          }
-        },
-        "serve-ssr": {
-          "builder": "@angular-devkit/build-angular: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

@@ -1,7 +1,7 @@
 {
   "name": "ngx-layout-srcs",
   "description": "ngx-layout",
-  "version": "17.0.1",
+  "version": "18.0.0",
   "homepage": "https://github.com/ngbracket/ngx-layout",
   "bugs": "https://github.com/ngbracket/ngx-layout/issues",
   "repository": {
@@ -10,7 +10,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": "^18.10.0 || >=20.9.0",
+    "node": "^18.20.4 || >=20.15.1",
     "yarn": ">=1.22.4 <2",
     "npm": "Please use yarn instead of NPM to install dependencies"
   },
@@ -26,34 +26,35 @@
     "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",
+    "serve:ssr:universal-demo-app": "node dist/universal-demo-app/server/server.mjs"
   },
   "private": true,
-  "requiredAngularVersion": ">=17.0.0",
+  "requiredAngularVersion": ">=18.0.0",
   "dependencies": {
-    "@angular/animations": "17.0.9",
-    "@angular/common": "17.0.9",
-    "@angular/compiler": "17.0.9",
-    "@angular/core": "17.0.9",
-    "@angular/forms": "17.0.9",
-    "@angular/material": "^17.0.5",
-    "@angular/platform-browser": "17.0.9",
-    "@angular/platform-browser-dynamic": "17.0.9",
-    "@angular/platform-server": "17.0.9",
-    "@angular/router": "17.0.9",
-    "@angular/ssr": "^17.0.10",
+    "@angular/animations": "18.1.0",
+    "@angular/common": "18.1.0",
+    "@angular/compiler": "18.1.0",
+    "@angular/core": "18.1.0",
+    "@angular/forms": "18.1.0",
+    "@angular/material": "^18.1.0",
+    "@angular/platform-browser": "18.1.0",
+    "@angular/platform-browser-dynamic": "18.1.0",
+    "@angular/platform-server": "18.1.0",
+    "@angular/router": "18.1.0",
+    "@angular/ssr": "^18.1.0",
     "express": "^4.18.2",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.10",
-    "@angular/cdk": "^17.0.5",
-    "@angular/cli": "17.0.10",
-    "@angular/compiler-cli": "17.0.9",
+    "@angular-devkit/build-angular": "^18.1.0",
+    "@angular/cdk": "^18.1.0",
+    "@angular/cli": "18.1.0",
+    "@angular/compiler-cli": "18.1.0",
     "@ngtools/webpack": "^17.0.10",
-    "@types/express": "^4.17.21",
+    "@types/express": "^4.17.17",
     "@types/jasmine": "^5.1.2",
     "@types/minimatch": "^5.1.2",
     "@types/node": "^20.9.0",
@@ -69,18 +70,21 @@
     "karma-parallel": "^0.3.1",
     "karma-sauce-launcher": "^4.1.4",
     "minimatch": "^9.0.3",
-    "ng-packagr": "^17.0.3",
+    "ng-packagr": "^18.1.0",
     "postcss": "^8.4.31",
     "postcss-scss": "^4.0.9",
     "protractor": "^7.0.0",
     "stylelint": "^15.11.0",
     "ts-node": "^10.9.1",
     "tslint": "^6.1.3",
-    "typescript": "5.2.2",
+    "typescript": "^5.5.3",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   },
   "resolutions": {
     "browser-sync-client": "2.29.3"
+  },
+  "volta": {
+    "node": "20.15.1"
   }
 }

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

@@ -1,45 +1,40 @@
-import 'zone.js/node';
-
 import { APP_BASE_HREF } from '@angular/common';
 import { CommonEngine } from '@angular/ssr';
-import * as express from 'express';
-import { existsSync } from 'node:fs';
-import { join } from 'node:path';
-import bootstrap from './src/main.server';
+import express from 'express';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
+import AppServerModule from './src/main.server';
 
 // 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'))
-    ? join(distFolder, 'index.original.html')
-    : join(distFolder, 'index.html');
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
 
   const commonEngine = new CommonEngine();
 
   server.set('view engine', 'html');
-  server.set('views', distFolder);
+  server.set('views', browserDistFolder);
 
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
-  server.get(
-    '*.*',
-    express.static(distFolder, {
-      maxAge: '1y',
-    })
-  );
+  server.get('**', express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: 'index.html',
+  }));
 
   // All regular routes use the Angular engine
-  server.get('*', (req, res, next) => {
+  server.get('**', (req, res, next) => {
     const { protocol, originalUrl, baseUrl, headers } = req;
 
     commonEngine
       .render({
-        bootstrap,
+        bootstrap: AppServerModule,
         documentFilePath: indexHtml,
         url: `${protocol}://${headers.host}${originalUrl}`,
-        publicPath: distFolder,
+        publicPath: browserDistFolder,
         providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
       })
       .then((html) => res.send(html))
@@ -59,14 +54,4 @@ function run(): void {
   });
 }
 
-// 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 default bootstrap;
+run();

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

@@ -5,11 +5,15 @@
     "noImplicitAny": false,
     "strict": false,
     "outDir": "../../../out-tsc/app",
-    "types": []
+    "types": [
+      "node"
+    ]
   },
   "files": [
     "src/main.ts",
-    "src/polyfills.ts"
+    "src/polyfills.ts",
+    "src/main.server.ts",
+    "server.ts"
   ],
   "include": [
     "src/**/*.d.ts"

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

@@ -1,6 +1,41 @@
-# ngx-layout
+# @ngbracket/ngx-layout
 
-The sources for this package are in the main [ngbracket/ngx-layout](https://github.com/ngbracket/ngx-layout) repo.
-Please file issues and pull requests against that repo.
+This project is a continuation of the original, open-source Angular project, @angular/flex-layout, which is no longer maintained. Please consider collaborating with us rather than creating your own, private flex libraries. Many hands make light work!
+
+If you would like to contribute to the project please get in touch with me on [twitter](https://twitter.com/duncanfaulkner). Alternatively, if you would like to sponsor the project details can be found on our [GitHub page](https://github.com/sponsors/ngbracket).
+
+Thank you for your support.
+
+### Getting Started
+
+Start by installing the ngx-layout library from `npm`
+
+```
+npm i -s @ngbracket/ngx-layout @angular/cdk
+```
+
+Next, you'll need to import the Layout module in your app's module.
+
+**app.module.ts**
+
+```ts
+
+import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+...
+
+@NgModule({
+    ...
+    imports: [ FlexLayoutModule ],
+    ...
+});
+```
+
+After that is configured, you can use the ngx-layout attributes in your HTML tags for flex layout:
+
+```html
+<div fxLayout="row" fxLayoutAlign="space-between"></div>
+```
+
+---
 
 License: MIT