feat: upgrade workspace to Angular 17

.circleci/config.yml

@@ -137,22 +137,6 @@ jobs:
           name: Run integration tests for the SSR build application
           command: yarn test:ci:integration:ssr
 
-  integration_ng15_tests:
-    <<: *job_defaults
-    steps:
-      - *attach_workspace
-      # https://github.com/CircleCI-Public/browser-tools-orb/issues/75
-      - browser-tools/install-browser-tools:
-          chrome-version: '116.0.5845.96'
-          replace-existing-chrome: true
-      - run:
-          name: Run integration tests for ng15 application
-          command: yarn integration:ng15
-      - persist_to_workspace:
-          root: ~/workspace
-          paths:
-            - app/integrations/hello-world-ng15/dist-integration
-
   integration_ng16_tests:
     <<: *job_defaults
     steps:

.github/actions/download-integration-test-artifacts/action.yml

@@ -7,7 +7,7 @@
 # - ./.github/actions/download-integration-test-artifacts
 
 name: download-integration-test-artifact
-description: Downloads all integration test artifacts with names such as 'hello-world-ng15'.
+description: Downloads all integration test artifacts with names such as 'hello-world-ng16'.
 
 inputs:
   path:
@@ -18,8 +18,15 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - name: Download hello-world-ng15 artifacts
+    - name: Download hello-world-ng16 artifacts
       uses: actions/download-artifact@v3
       with:
-        name: hello-world-ng15
+        name: hello-world-ng16
         path: ${{ inputs.path }}
+
+    - name: Download hello-world-ng17 artifacts
+      uses: actions/download-artifact@v3
+      with:
+        name: hello-world-ng17
+        path: ${{ inputs.path }}
+

.github/actions/setup/action.yml

@@ -51,7 +51,6 @@ runs:
           ~/.cache
           ./node_modules
           ./@ngxs
-          ./integrations/hello-world-ng15/dist-integration
           ./integrations/hello-world-ng16/dist-integration
           ./integrations/hello-world-ng17/dist-integration
         key: ${{ runner.os }}-node-${{ inputs.node-version }}-yarn-${{ hashFiles('**/yarn.lock') }}-branch-${{ inputs.github-ref-name }}-sha-${{ inputs.github-sha }}

.github/actions/upload-integration-test-artifact/action.yml

@@ -7,11 +7,11 @@
 # - ./.github/actions/upload-integration-test-artifact
 
 name: upload-integration-test-artifact
-description: Upload an integration test artifact with a name such as 'hello-world-ng15'.
+description: Upload an integration test artifact with a name such as 'hello-world-ng16'.
 
 inputs:
   script:
-    description: A script with a name such as 'integration:ng15' that generates an integration test artifact.
+    description: A script with a name such as 'integration:ng16' that generates an integration test artifact.
     required: true
 
 runs:
@@ -21,7 +21,7 @@ runs:
       id: artifact-name
       shell: bash
       run: |
-        echo "Replace colons with dashes, substring 'integration' with a substring 'hello-world'. Example result: hello-world-ng15"
+        echo "Replace colons with dashes, substring 'integration' with a substring 'hello-world'. Example result: hello-world-ng16"
         echo "value=$(echo ${SCRIPT} | sed -r "s/:/-/g" | sed -r "s/integration/hello-world/g")" >> $GITHUB_OUTPUT
       env:
         SCRIPT: ${{ inputs.script }}

.github/workflows/pr-validation.yml

@@ -83,7 +83,6 @@ jobs:
     strategy:
       matrix:
         script:
-          - 'integration:ng15'
           - 'integration:ng16'
           - 'integration:ng17'
           - 'test:types'
@@ -106,7 +105,7 @@ jobs:
         run: yarn ${{ matrix.script }}
 
       - name: Upload an integration test artifact
-        if: ${{ matrix.script == 'integration:ng15' }}
+        if: ${{ startsWith( matrix.script, 'integration:' ) }}
         uses: ./.github/actions/upload-integration-test-artifact
         with:
           script: ${{ matrix.script }}

.github/workflows/release.yml

@@ -78,7 +78,8 @@ jobs:
     strategy:
       matrix:
         script:
-          - 'integration:ng15'
+          - 'integration:ng16'
+          - 'integration:ng17'
           - 'test:types'
 
     steps:
@@ -96,7 +97,7 @@ jobs:
         run: yarn ${{ matrix.script }}
 
       - name: Upload an integration test artifact
-        if: ${{ matrix.script == 'integration:ng15' }}
+        if: ${{ startsWith( matrix.script, 'integration:' ) }}
         uses: ./.github/actions/upload-integration-test-artifact
         with:
           script: ${{ matrix.script }}

.github/workflows/trunk.yml

@@ -78,7 +78,8 @@ jobs:
     strategy:
       matrix:
         script:
-          - 'integration:ng15'
+          - 'integration:ng16'
+          - 'integration:ng17'
           - 'test:types'
 
     steps:
@@ -96,7 +97,7 @@ jobs:
         run: yarn ${{ matrix.script }}
 
       - name: Upload an integration test artifact
-        if: ${{ matrix.script == 'integration:ng15' }}
+        if: ${{ startsWith( matrix.script, 'integration:' ) }}
         uses: ./.github/actions/upload-integration-test-artifact
         with:
           script: ${{ matrix.script }}

.gitignore

@@ -68,3 +68,5 @@ yarn-error.log
 package-lock.json
 dist-integration-server/
 .cache
+migrations.json
+.nx/cache

.prettierignore

@@ -10,3 +10,5 @@ build/**
 coverage/**
 @ngxs/**
 **/dist/**
+
+/.nx/cache

CHANGELOG.md

@@ -16,6 +16,7 @@ $ npm install @ngxs/store@dev
 - Fix: Show error when state initialization order is invalid [#2066](https://github.com/ngxs/store/pull/2066), [#2067](https://github.com/ngxs/store/pull/2067)
 - Fix: Change `instanceof Promise` to `isPromise` to allow any promisable object [#2093](https://github.com/ngxs/store/pull/2093)
 - Fix: Router Plugin - Expose `NGXS_ROUTER_PLUGIN_OPTIONS` privately [#2037](https://github.com/ngxs/store/pull/2037)
+- Build: Upgrade to NX 17 [#2087](https://github.com/ngxs/store/pull/2087)
 
 # 3.8.2 2023-11-30
 

integration/app/app.config.browser.ts

@@ -0,0 +1,8 @@
+import { mergeApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { appConfig } from './app.config';
+
+export const appBrowserConfig = mergeApplicationConfig(appConfig, {
+  providers: [provideAnimations()]
+});

integration/app/app.config.server.ts

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

integration/jest.config.js

@@ -1,4 +1,4 @@
-const { pathsToModuleNameMapper: resolver } = require('ts-jest/utils');
+const { pathsToModuleNameMapper: resolver } = require('ts-jest');
 const { compilerOptions } = require('../tsconfig.base');
 const CI = process.env['CI'] === 'true';
 
@@ -12,16 +12,18 @@ module.exports = {
   displayName: 'integration',
   preset: '../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.(html|svg)$'
-    }
-  },
+  globals: {},
   moduleNameMapper,
   coverageDirectory: '../coverage/integration',
   transform: {
-    '^.+\\.(ts|js|html)$': 'jest-preset-angular'
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        isolatedModules: true,
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$'
+      }
+    ]
   },
   snapshotSerializers: [
     'jest-preset-angular/build/serializers/no-ng-attributes',

integration/main.server.ts

@@ -1,3 +1,7 @@
-export { AppComponent } from './app/app.component';
-export { appServerConfig } from './app/app-server.config';
-export { APP_ID_VALUE } from './app/app.config';
+import { bootstrapApplication } from '@angular/platform-browser';
+
+import { AppComponent } from './app/app.component';
+import { appServerConfig } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(AppComponent, appServerConfig);
+export default bootstrap;

integration/main.ts

@@ -2,7 +2,7 @@ import { enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
 import { AppComponent } from './app/app.component';
-import { appBrowserConfig } from './app/app-browser.config';
+import { appBrowserConfig } from './app/app.config.browser';
 import { environment } from './environments/environment';
 
 if (environment.production) {

integration/project.json

@@ -1,7 +1,6 @@
 {
   "name": "integration",
   "$schema": "../node_modules/nx/schemas/project-schema.json",
-  "root": "integration/",
   "sourceRoot": "integration",
   "projectType": "application",
   "prefix": "app",
@@ -100,10 +99,9 @@
       "dependsOn": ["^build"]
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "options": {
-        "jestConfig": "integration/jest.config.js",
-        "passWithNoTests": true
+        "jestConfig": "integration/jest.config.js"
       },
       "dependsOn": ["^build"]
     }

integration/server.ts

@@ -1,73 +1,48 @@
 import 'zone.js/node';
 
-import { readFile } from 'fs/promises';
-import { join } from 'path';
+import * as path from 'node:path';
+import * as url from 'node:url';
 import * as express from 'express';
-import { Provider } from '@angular/core';
 import { APP_BASE_HREF } from '@angular/common';
-import { renderApplication } from '@angular/platform-server';
-import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
 
-import { APP_ID_VALUE, AppComponent, appServerConfig } from './main.server';
+import { CommonEngine } from '@angular/ssr';
 
-interface RenderOptions {
-  req: express.Request;
-  providers: Provider[];
-}
+import bootstrap from './main.server';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app() {
   const server = express();
-  const distFolder = join(process.cwd(), 'dist-integration');
-  let indexHtmlContent: string | null = null;
-
-  // TODO: use `ngExpressEngine({bootstrap})` in v16.
-  server.engine(
-    'html',
-    async (
-      path: string,
-      options: object,
-      callback: (error: Error | null, content: string) => void
-    ) => {
-      const { req, providers } = options as RenderOptions;
-
-      indexHtmlContent ||= await readFile(path, { encoding: 'utf-8' });
-
-      const html = await renderApplication(AppComponent, {
-        providers,
-        appId: APP_ID_VALUE,
-        document: indexHtmlContent,
-        url: `${req.baseUrl}${req.url}`
-      });
-
-      callback(null, html);
-    }
-  );
+  const browserDistFolder = path.join(process.cwd(), 'dist-integration');
+  const indexHtml = path.join(browserDistFolder, 'index.html');
+  const commonEngine = new CommonEngine();
 
   server.set('view engine', 'html');
-  server.set('views', distFolder);
+  server.set('views', browserDistFolder);
 
   // Example Express Rest API endpoints
   // app.get('/api/**', (req, res) => { });
   // Serve static files from /browser
   server.get(
     '*.*',
-    express.static(distFolder, {
+    express.static(browserDistFolder, {
       maxAge: '1y'
     })
   );
 
   // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    res.render('index', {
-      req,
-      providers: [
-        ...appServerConfig.providers,
-        { provide: APP_BASE_HREF, useValue: req.baseUrl },
-        { provide: REQUEST, useValue: req },
-        { provide: RESPONSE, useValue: res }
-      ]
-    });
+  server.get('*', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;
+
+    commonEngine
+      .render({
+        bootstrap,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: browserDistFolder,
+        providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
+      })
+      .then(html => res.send(html))
+      .catch(next);
   });
 
   return server;