build: add Angular 19 support (#2269)

* build: add Angular 19 support

* build: add job to circle

* chore: remove redundant module

* refactor: upgrade workspace and unit tests

* refactor: update `store` target unit tests

* refactor: fix `create-app` build (TS version upgrade)

* refactor: drop ng16 integration

* refactor: drop ng17 integration

* refactor: drop ng18 integration

* refactor: upgrade peer dep version

* refactor: address feedback

* refactor: remove redundant file

.circleci/config.yml

@@ -139,44 +139,18 @@ jobs:
           name: Run integration tests for the SSR build application
           command: yarn test:ci:integration:ssr
 
-  integration_ng16_tests:
+  integration_ng19_tests:
     <<: *job_defaults
     steps:
       - *attach_workspace
       - browser-tools/install-browser-tools
       - run:
-          name: Run integration tests for ng16 application
-          command: yarn integration:ng16
+          name: Run integration tests for ng19 application
+          command: yarn integration:ng19
       - persist_to_workspace:
           root: ~/workspace
           paths:
-            - app/integrations/hello-world-ng16/dist-integration
-
-  integration_ng17_tests:
-    <<: *job_defaults
-    steps:
-      - *attach_workspace
-      - browser-tools/install-browser-tools
-      - run:
-          name: Run integration tests for ng17 application
-          command: yarn integration:ng17
-      - persist_to_workspace:
-          root: ~/workspace
-          paths:
-            - app/integrations/hello-world-ng17/dist-integration
-
-  integration_ng18_tests:
-    <<: *job_defaults
-    steps:
-      - *attach_workspace
-      - browser-tools/install-browser-tools
-      - run:
-          name: Run integration tests for ng18 application
-          command: yarn integration:ng18
-      - persist_to_workspace:
-          root: ~/workspace
-          paths:
-            - app/integrations/hello-world-ng18/dist-integration
+            - app/integrations/hello-world-ng19/dist-integration
 
   integration_test_types:
     <<: *job_defaults
@@ -255,15 +229,7 @@ workflows:
       ###     requires:
       ###       - build
 
-      - integration_ng16_tests:
-          requires:
-            - build
-
-      - integration_ng17_tests:
-          requires:
-            - build
-
-      - integration_ng18_tests:
+      - integration_ng19_tests:
           requires:
             - build
 

.github/actions/setup/action.yml

@@ -54,9 +54,7 @@ runs:
           ~/.cache
           ./node_modules
           ./@ngxs
-          ./integrations/hello-world-ng16/dist-integration
-          ./integrations/hello-world-ng17/dist-integration
-          ./integrations/hello-world-ng18/dist-integration
+          ./integrations/hello-world-ng19/dist-integration
         key: ${{ runner.os }}-node-${{ inputs.node-version }}-yarn-${{ hashFiles('**/yarn.lock') }}-branch-${{ inputs.github-ref-name }}-sha-${{ inputs.github-sha }}
         restore-keys: |
           ${{ runner.os }}-node-${{ inputs.node-version }}-yarn-${{ hashFiles('**/yarn.lock') }}-branch-${{ inputs.github-ref-name }}-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-ng16'.
+description: Upload an integration test artifact with a name such as 'hello-world-ng19'.
 
 inputs:
   script:
-    description: A script with a name such as 'integration:ng16' that generates an integration test artifact.
+    description: A script with a name such as 'integration:ng19' 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-ng16"
+        echo "Replace colons with dashes, substring 'integration' with a substring 'hello-world'. Example result: hello-world-ng19"
         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

@@ -96,9 +96,7 @@ jobs:
     strategy:
       matrix:
         script:
-          - 'integration:ng16'
-          - 'integration:ng17'
-          - 'integration:ng18'
+          - 'integration:ng19'
           - 'test:types'
 
     steps:

.github/workflows/release.yml

@@ -85,9 +85,6 @@ jobs:
     strategy:
       matrix:
         script:
-          - 'integration:ng16'
-          - 'integration:ng17'
-          - 'integration:ng18'
           - 'test:types'
 
     steps:

.github/workflows/trunk.yml

@@ -85,9 +85,6 @@ jobs:
     strategy:
       matrix:
         script:
-          - 'integration:ng16'
-          - 'integration:ng17'
-          - 'integration:ng18'
           - 'test:types'
 
     steps:

integration/app/counter/counter.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { Component, OnInit, Signal } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
@@ -7,7 +8,8 @@ import { CounterState, CounterStateModel } from '@integration/counter/counter.st
 
 @Component({
   selector: 'counter',
-  templateUrl: './counter.component.html'
+  templateUrl: './counter.component.html',
+  imports: [CommonModule]
 })
 export class CounterComponent implements OnInit {
   counter$: Observable<CounterStateModel> = this._store.select(CounterState.getCounterState);

integration/app/counter/counter.module.ts

@@ -3,16 +3,10 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
 import { routes } from '@integration/counter/counter.routes';
-import { CounterComponent } from '@integration/counter/counter.component';
 import { NgxsModule } from '@ngxs/store';
 import { CounterState } from '@integration/counter/counter.state';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    RouterModule.forChild(routes),
-    NgxsModule.forFeature([CounterState])
-  ],
-  declarations: [CounterComponent]
+  imports: [CommonModule, RouterModule.forChild(routes), NgxsModule.forFeature([CounterState])]
 })
 export class CounterModule {}

integration/app/detail/detail.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { Component, Signal } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
@@ -6,7 +7,8 @@ import { DetailState, DetailStateModel } from '@integration/detail/detail.state'
 
 @Component({
   selector: 'app-detail',
-  templateUrl: './detail.component.html'
+  templateUrl: './detail.component.html',
+  imports: [CommonModule]
 })
 export class DetailComponent {
   detail$: Observable<DetailStateModel> = this._store.select(DetailState.getDetailState);

integration/app/detail/detail.module.ts

@@ -3,12 +3,10 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { NgxsModule } from '@ngxs/store';
 
-import { DetailComponent } from '@integration/detail/detail.component';
 import { DetailState } from '@integration/detail/detail.state';
 import { routes } from '@integration/detail/detail.routes';
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes), NgxsModule.forFeature([DetailState])],
-  declarations: [DetailComponent]
+  imports: [CommonModule, RouterModule.forChild(routes), NgxsModule.forFeature([DetailState])]
 })
 export class DetailModule {}

integration/app/list/list.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { Component, Signal } from '@angular/core';
 import { RouterStateSnapshot } from '@angular/router';
 import { Store } from '@ngxs/store';
@@ -8,7 +9,8 @@ import { ListState } from '@integration/list/list.state';
 
 @Component({
   selector: 'app-list',
-  templateUrl: './list.component.html'
+  templateUrl: './list.component.html',
+  imports: [CommonModule]
 })
 export class ListComponent {
   list$: Observable<string[]> = this._store.select(ListState.getListState);

integration/app/list/list.module.ts

@@ -4,13 +4,11 @@ import { RouterModule } from '@angular/router';
 import { NgxsModule } from '@ngxs/store';
 
 import { ListState } from '@integration/list/list.state';
-import { ListComponent } from '@integration/list/list.component';
 import { routes } from '@integration/list/list.routes';
 import { ListResolver } from '@integration/list/list.resolver';
 
 @NgModule({
   imports: [CommonModule, RouterModule.forChild(routes), NgxsModule.forFeature([ListState])],
-  declarations: [ListComponent],
   providers: [ListResolver]
 })
 export class ListModule {}