[NAE- 1940] Update to new Angular

.github/workflows/master-build.yml

@@ -9,13 +9,13 @@ jobs:
         name: Build
         runs-on: ubuntu-latest
         steps:
-            -   uses: actions/checkout@v3
+            -   uses: actions/checkout@v4
                 with:
                     fetch-depth: 0
-            -   name: Use Node.js 16
-                uses: actions/setup-node@v3
+            -   name: Use Node.js 20
+                uses: actions/setup-node@v4
                 with:
-                    node-version: 16
+                    node-version: 20
             -   run: npm i --legacy-peer-deps
             -   name: Build & test components-core
                 run: |
@@ -36,7 +36,7 @@ jobs:
                     SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
             -   name: Build examples
                 run: npm run example:build
-            -   uses: EndBug/add-and-commit@v8
+            -   uses: EndBug/add-and-commit@v9
                 with:
                     add: docs
                     pathspec_error_handling: exitImmediately

.github/workflows/pr-build.yml

@@ -8,39 +8,39 @@ jobs:
         runs-on: ubuntu-latest
         strategy:
             matrix:
-                node-version: [ 14, 16, 18 ]
+                node-version: [ 18, 20 ]
         steps:
-            -   uses: actions/checkout@v3
+            -   uses: actions/checkout@v4
                 with:
                     fetch-depth: 0
-            -   uses: actions/setup-node@v3
+            -   uses: actions/setup-node@v4
                 name: Full Test on Node.js version ${{ matrix.node-version }}
                 with:
                     node-version: ${{ matrix.node-version }}
-            -   run: npm i
+            -   run: npm i --legacy-peer-deps
             -   name: Build & test components-core
                 run: |
                     npm run ncc:build
                     npm run ncc:full-test
-                    npm i ./dist/netgrif-components-core --save-optional
+                    npm i ./dist/netgrif-components-core --save-optional --legacy-peer-deps
             -   name: Build & test components
                 run: |
                     npm run nc:build
                     npm run nc:full-test
-                    npm i ./dist/netgrif-components --save-optional
+                    npm i ./dist/netgrif-components --save-optional --legacy-peer-deps
             -   name: Build examples
                 run: npm run example:build
     test:
         name: Test with SonarCloud
         runs-on: ubuntu-latest
         steps:
-            -   uses: actions/checkout@v3
+            -   uses: actions/checkout@v4
                 with:
                     fetch-depth: 0
-            -   uses: actions/setup-node@v3
+            -   uses: actions/setup-node@v4
                 name: Full Test
                 with:
-                    node-version: 16
+                    node-version: 20
             -   run: npm i --legacy-peer-deps
             -   name: Build & test components-core
                 run: |

.github/workflows/release-build.yml

@@ -6,10 +6,10 @@ jobs:
     build:
         runs-on: ubuntu-latest
         steps:
-            -   uses: actions/checkout@v3
-            -   uses: actions/setup-node@v3
+            -   uses: actions/checkout@v4
+            -   uses: actions/setup-node@v4
                 with:
-                    node-version: 16
+                    node-version: 20
             -   run: |
                     npm i --legacy-peer-deps
                     npm run ncc:build
@@ -24,10 +24,10 @@ jobs:
         needs: build
         runs-on: ubuntu-latest
         steps:
-            -   uses: actions/checkout@v3
-            -   uses: actions/setup-node@v3
+            -   uses: actions/checkout@v4
+            -   uses: actions/setup-node@v4
                 with:
-                    node-version: 16
+                    node-version: 20
                     registry-url: https://registry.npmjs.org/
             -   run: npm i --legacy-peer-deps
             -   name: Publish components-core
@@ -54,10 +54,10 @@ jobs:
             contents: read
             packages: write
         steps:
-            -   uses: actions/checkout@v3
-            -   uses: actions/setup-node@v3
+            -   uses: actions/checkout@v4
+            -   uses: actions/setup-node@v4
                 with:
-                    node-version: 16
+                    node-version: 20
                     registry-url: https://npm.pkg.github.com
             -   run: npm i --legacy-peer-deps
             -   name: Publish components-core

angular.json

@@ -113,10 +113,17 @@
                 "build": {
                     "builder": "@angular-devkit/build-angular:browser",
                     "options": {
+                        "allowedCommonJsDependencies": [
+                            "moment",
+                            "buffer",
+                            "easymde",
+                            "semver",
+                            "rfdc"
+                        ],
                         "outputPath": "dist/nae-example-app",
                         "index": "projects/nae-example-app/src/index.html",
                         "main": "projects/nae-example-app/src/main.ts",
-                        "polyfills": "projects/nae-example-app/src/polyfills.ts",
+                        "polyfills": ["zone.js"],
                         "tsConfig": "projects/nae-example-app/tsconfig.app.json",
                         "assets": [
                             "projects/nae-example-app/src/favicon.ico",
@@ -168,25 +175,25 @@
                 "serve": {
                     "builder": "@angular-devkit/build-angular:dev-server",
                     "options": {
-                        "browserTarget": "nae-example-app:build"
+                        "buildTarget": "nae-example-app:build"
                     },
                     "configurations": {
                         "production": {
-                            "browserTarget": "nae-example-app:build:production"
+                            "buildTarget": "nae-example-app:build:production"
                         }
                     }
                 },
                 "extract-i18n": {
                     "builder": "@angular-devkit/build-angular:extract-i18n",
                     "options": {
-                        "browserTarget": "nae-example-app:build"
+                        "buildTarget": "nae-example-app:build"
                     }
                 },
                 "test": {
                     "builder": "@angular-devkit/build-angular:karma",
                     "options": {
                         "main": "projects/nae-example-app/src/test.ts",
-                        "polyfills": "projects/nae-example-app/src/polyfills.ts",
+                        "polyfills": ["zone.js"],
                         "tsConfig": "projects/nae-example-app/tsconfig.spec.json",
                         "karmaConfig": "projects/nae-example-app/karma.conf.js",
                         "assets": [
@@ -227,7 +234,6 @@
             }
         }
     },
-    "defaultProject": "nae-example-app",
     "cli": {
         "analytics": false,
         "defaultCollection": "@angular-eslint/schematics"

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netgrif/components-project",
-    "version": "6.4.0-rc.2",
+    "version": "6.5.0-beta.1",
     "description": "Netgrif Application Engine Frontend project. Project includes angular libraries as base for NAE applications.",
     "homepage": "https://components.netgrif.com",
     "license": "SEE LICENSE IN LICENSE",
@@ -33,7 +33,8 @@
         "test": "ng test",
         "lint": "ng lint",
         "e2e": "ng e2e",
-        "ncc:build": "ng build netgrif-components-core --configuration production && npm run ncc:build-schematics",
+        "ncc:clean": "node projects/netgrif-components-core/src/scripts/delete-local-build-link.js",
+        "ncc:build": "npm run ncc:clean && ng build netgrif-components-core --configuration production && npm run ncc:build-schematics",
         "ncc:local-build": "npm run ncc:build && npm i ./dist/netgrif-components-core --save-optional --legacy-peer-deps",
         "ncc:build-schematics": "node projects/netgrif-components-core/src/scripts/build-schematics.js",
         "ncc:lint": "ng lint netgrif-components-core",
@@ -64,32 +65,32 @@
         "project:sonar": "node scripts/sonar-scanner-analysis.js",
         "components:start": "npm run nc:local-build && ng serve",
         "example:start": "ng serve",
-        "example:build": "ng build --configuration production"
+        "example:build": "ng build nae-example-app --configuration production"
     },
     "dependencies": {
-        "@angular-material-components/datetime-picker": "~7.0.1",
-        "@angular-material-components/moment-adapter": "~7.0.0",
-        "@angular/animations": "~13.3.1",
-        "@angular/cdk": "~13.3.1",
-        "@angular/common": "~13.3.1",
-        "@angular/compiler": "~13.3.1",
-        "@angular/core": "~13.3.1",
-        "@angular/flex-layout": "~13.0.0-beta.38",
-        "@angular/forms": "~13.3.1",
-        "@angular/material": "~13.3.1",
-        "@angular/material-moment-adapter": "~13.3.1",
-        "@angular/platform-browser": "~13.3.1",
-        "@angular/platform-browser-dynamic": "~13.3.1",
-        "@angular/router": "~13.3.1",
-        "@covalent/markdown": "~4.1.0",
-        "@ngx-translate/core": "~13.0.0",
-        "@ngx-translate/http-loader": "~6.0.0",
-        "@schematics/angular": "~13.3.0",
+        "@angular-material-components/datetime-picker": "~16.0.1",
+        "@angular-material-components/moment-adapter": "~16.0.1",
+        "@angular/animations": "~17.3.11",
+        "@angular/cdk": "~17.3.10",
+        "@angular/common": "~17.3.11",
+        "@angular/compiler": "~17.3.11",
+        "@angular/core": "~17.3.11",
+        "@angular/forms": "~17.3.11",
+        "@angular/material": "~17.3.10",
+        "@angular/material-moment-adapter": "~17.3.10",
+        "@angular/platform-browser": "~17.3.11",
+        "@angular/platform-browser-dynamic": "~17.3.11",
+        "@angular/router": "~17.3.11",
+        "@covalent/markdown": "~8.0.0",
+        "@ngbracket/ngx-layout": "^17.0.1",
+        "@ngx-translate/core": "~15.0.0",
+        "@ngx-translate/http-loader": "~8.0.0",
+        "@schematics/angular": "~17.3.8",
         "@swimlane/ngx-charts": "~20.1.0",
         "@types/mousetrap": "~1.6.9",
-        "angular-resizable-element": "~3.3.0",
-        "angular-resize-event": "~3.1.1",
-        "angular2-hotkeys": "~2.4.0",
+        "angular-resizable-element": "~7.0.0",
+        "angular-resize-event": "~3.2.0",
+        "angular2-hotkeys": "~16.0.0",
         "easymde": "~2.16.1",
         "hammerjs": "~2.0.8",
         "json-schema-to-typescript": "~8.1.0",
@@ -101,56 +102,56 @@
         "ngx-quill": "~16.2.0",
         "palette-creator": "~0.5.4",
         "quill": "~1.3.7",
-        "rxjs": "~6.6.7",
+        "rxjs": "~7.8.1",
         "showdown": "^2.0.3",
         "tslib": "^2.0.0",
-        "zone.js": "~0.11.4"
+        "zone.js": "~0.14.0"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "~13.3.1",
-        "@angular-devkit/schematics-cli": "~13.3.10",
-        "@angular-eslint/builder": "~13.1.0",
-        "@angular-eslint/eslint-plugin": "~13.1.0",
-        "@angular-eslint/eslint-plugin-template": "~13.1.0",
-        "@angular-eslint/schematics": "~13.1.0",
-        "@angular-eslint/template-parser": "~13.1.0",
-        "@angular/cli": "~13.3.1",
-        "@angular/compiler-cli": "~13.3.1",
-        "@angular/language-service": "~13.3.1",
-        "@compodoc/compodoc": "1.1.13",
-        "@types/jasmine": "~3.6.0",
-        "@types/jasminewd2": "~2.0.3",
+        "@angular-devkit/build-angular": "~17.3.8",
+        "@angular-devkit/schematics-cli": "~17.3.8",
+        "@angular-eslint/builder": "~17.1.0",
+        "@angular-eslint/eslint-plugin": "~17.1.0",
+        "@angular-eslint/eslint-plugin-template": "~17.1.0",
+        "@angular-eslint/schematics": "~17.1.0",
+        "@angular-eslint/template-parser": "~17.1.0",
+        "@angular/cli": "~17.3.8",
+        "@angular/compiler-cli": "~17.3.11",
+        "@angular/language-service": "~17.3.11",
+        "@compodoc/compodoc": "1.1.23",
+        "@types/jasmine": "~3.10.0",
+        "@types/jasminewd2": "~2.0.10",
         "@types/moment": "~2.13.0",
         "@types/node": "~12.12.29",
-        "@typescript-eslint/eslint-plugin": "~5.17.0",
-        "@typescript-eslint/parser": "~5.17.0",
+        "@typescript-eslint/eslint-plugin": "~6.21.0",
+        "@typescript-eslint/parser": "~6.21.0",
         "commander": "~4.1.1",
         "cspell": "~5.18.4",
         "eslint": "~8.12.0",
-        "jasmine-core": "~3.10.1",
-        "jasmine-spec-reporter": "~5.0.0",
-        "json-server": "~0.15.1",
-        "karma": "~6.3.17",
-        "karma-chrome-launcher": "~3.1.0",
-        "karma-coverage-istanbul-reporter": "~2.1.0",
-        "karma-firefox-launcher": "~1.3.0",
-        "karma-jasmine": "~4.0.0",
-        "karma-jasmine-html-reporter": "~1.7.0",
+        "jasmine-core": "~5.1.0",
+        "jasmine-spec-reporter": "~7.0.0",
+        "json-server": "~0.17.4",
+        "karma": "~6.4.2",
+        "karma-chrome-launcher": "~3.2.0",
+        "karma-coverage-istanbul-reporter": "~3.0.0",
+        "karma-firefox-launcher": "~2.1.0",
+        "karma-jasmine": "~5.1.0",
+        "karma-jasmine-html-reporter": "~2.1.0",
         "karma-junit-reporter": "~2.0.1",
         "karma-mocha-reporter": "~2.2.5",
         "karma-nyan-reporter": "~0.2.5",
         "karma-sonarqube-unit-reporter": "^0.0.23",
+        "karma-webpack": "^5.0.1",
         "ncp": "~2.0.0",
-        "ng-packagr": "~13.3.0",
-        "protractor": "~7.0.0",
-        "puppeteer": "~2.1.1",
+        "ng-packagr": "~17.3.0",
+        "puppeteer": "~22.0.0",
         "requirejs": "^2.3.6",
         "schematics-utilities": "~2.0.1",
         "sonarqube-scanner": "~2.5.0",
         "ts-node": "~10.2.1",
         "typedoc": "~0.22.11",
-        "typescript": "~4.6.3",
-        "typescript-json-schema": "~0.42.0",
+        "typescript": "~5.2.0",
+        "typescript-json-schema": "~0.60.0",
         "unique-names-generator": "~4.2.0"
     },
     "optionalDependencies": {

projects/nae-example-app/browserslist

@@ -5,8 +5,10 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
-last 2 versions
+last 2 Chrome versions
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+last 2 Android major versions
 Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.

projects/nae-example-app/src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import {RouterModule, Routes} from '@angular/router';
 const routes: Routes = [];
 
 @NgModule({
-    imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+    imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
 })
 export class AppRoutingModule {

projects/nae-example-app/src/app/app.module.ts

@@ -22,7 +22,7 @@ import {
     FrontActionModule, NAE_ASYNC_RENDERING_CONFIGURATION
 } from '@netgrif/components-core';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {FlexLayoutModule, FlexModule} from '@angular/flex-layout';
+import {FlexLayoutModule, FlexModule} from '@ngbracket/ngx-layout';
 import {DocumentationComponent} from './doc/documentation/documentation.component';
 import {NaeExampleAppConfigurationService} from './nae-example-app-configuration.service';
 import {AuthenticationComponent} from './doc/authentication/authentication.component';

projects/nae-example-app/src/app/doc/active-group/active-group.component.ts

@@ -15,8 +15,8 @@ export class ActiveGroupComponent implements OnDestroy {
 
     activeGroups: Array<string>;
 
-    fcGroup: FormControl;
-    fcGroups: FormControl;
+    fcGroup: FormControl<string>;
+    fcGroups: FormControl<string[]>;
 
     private _subGroups: Subscription;
     private _subGroupFc: Subscription;

projects/nae-example-app/src/app/doc/documentation/documentation.component.scss

@@ -2,7 +2,7 @@ code {
     background-color: rgba(0, 0, 0, .06);
     padding: 5px;
     font-size: 90%;
-    font-family: 'Roboto', sans-serif;
+    font-family: Roboto, sans-serif;
     font-weight: 400;
     margin-bottom: 20px;
     width: max-content;