Major/update to ng 14 (#28)

* update core + cli

* update material

* finished update to ng14

Author: eksrha

.github/workflows/pull-request.yml

@@ -27,9 +27,3 @@ jobs:
         run: yarn
       - name: build applikation
         run: yarn run build
-
-      - name: npm publish to GitHub
-        working-directory: dist/ng-mat-components
-        run: yarn publish --access public --new-version ${{ needs.generate_infos.outputs.version }} --no-git-tag-version
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

angular.json

@@ -58,9 +58,13 @@
             "polyfills": "projects/lib-workspace/src/polyfills.ts",
             "tsConfig": "projects/lib-workspace/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "allowedCommonJsDependencies": ["moment"],
-            "assets": ["projects/lib-workspace/src/favicon.ico", "projects/lib-workspace/src/assets"],
-            "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "projects/lib-workspace/src/styles.scss"],
+            "assets": [
+              "projects/lib-workspace/src/favicon.ico",
+              "projects/lib-workspace/src/assets"
+            ],
+            "styles": [
+              "projects/lib-workspace/src/styles.scss"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -122,12 +126,21 @@
             "tsConfig": "projects/lib-workspace/tsconfig.spec.json",
             "karmaConfig": "projects/lib-workspace/karma.conf.js",
             "inlineStyleLanguage": "scss",
-            "assets": ["projects/lib-workspace/src/favicon.ico", "projects/lib-workspace/src/assets"],
-            "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "projects/lib-workspace/src/styles.scss"],
+            "assets": [
+              "projects/lib-workspace/src/favicon.ico",
+              "projects/lib-workspace/src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "projects/lib-workspace/src/styles.scss"
+            ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
-}
+}

package.json

@@ -10,10 +10,8 @@
     "ng": "ng",
     "start": "ng serve",
     "start:codespace": "ng serve --disable-host-check",
-    "watch:scss": "sass --watch projects/ng-mat-components/test.scss:dist/css/css",
     "prebuild": "cp README.md projects/ng-mat-components/",
     "build": "ng build --project ng-mat-components",
-    "build:sass": "sass projects/ng-mat-components/_index.scss:dist/css/css",
     "build:workspace": "ng build --project lib-workspace",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
@@ -22,16 +20,16 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "~13.3.11",
-    "@angular/cdk": "13.3.9",
-    "@angular/common": "~13.3.11",
-    "@angular/compiler": "~13.3.11",
-    "@angular/core": "~13.3.11",
-    "@angular/forms": "~13.3.11",
-    "@angular/material": "13.3.9",
-    "@angular/platform-browser": "~13.3.11",
-    "@angular/platform-browser-dynamic": "~13.3.11",
-    "@angular/router": "~13.3.11",
+    "@angular/animations": "^14.2.12",
+    "@angular/cdk": "14.2.7",
+    "@angular/common": "^14.2.12",
+    "@angular/compiler": "^14.2.12",
+    "@angular/core": "^14.2.12",
+    "@angular/forms": "^14.2.12",
+    "@angular/material": "14.2.7",
+    "@angular/platform-browser": "^14.2.12",
+    "@angular/platform-browser-dynamic": "^14.2.12",
+    "@angular/router": "^14.2.12",
     "date-fns": "^2.29.3",
     "material-icons": "^1.13.1",
     "postcss": "^8.4.20",
@@ -41,30 +39,30 @@
     "zone.js": "~0.11.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.9",
-    "@angular-eslint/builder": "13.5.0",
-    "@angular-eslint/eslint-plugin": "13.5.0",
-    "@angular-eslint/eslint-plugin-template": "13.5.0",
-    "@angular-eslint/schematics": "13.5.0",
-    "@angular-eslint/template-parser": "13.5.0",
-    "@angular/cli": "~13.3.9",
-    "@angular/compiler-cli": "~13.3.11",
+    "@angular-devkit/build-angular": "^14.2.10",
+    "@angular-eslint/builder": "14.4.0",
+    "@angular-eslint/eslint-plugin": "14.4.0",
+    "@angular-eslint/eslint-plugin-template": "14.4.0",
+    "@angular-eslint/schematics": "14.4.0",
+    "@angular-eslint/template-parser": "14.4.0",
+    "@angular/cli": "^14.2.10",
+    "@angular/compiler-cli": "^14.2.12",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
-    "@typescript-eslint/eslint-plugin": "5.27.1",
-    "@typescript-eslint/parser": "5.27.1",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
     "autoprefixer": "^10.4.13",
-    "eslint": "^8.17.0",
+    "eslint": "^8.23.0",
     "jasmine-core": "~4.0.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "ng-packagr": "^13.0.0",
+    "ng-packagr": "^14.2.2",
     "prettier": "^2.8.3",
     "prettier-eslint": "^15.0.1",
     "sass": "^1.57.1",
-    "typescript": "~4.5.2"
+    "typescript": "~4.8.4"
   }
 }

projects/lib-workspace/src/styles.scss

@@ -3,17 +3,15 @@
 @use './styling/palettes';
 
 @import 'material-icons/iconfont/material-icons.scss';
-@import './styling/roboto.scss';
 
 @include mat.core();
+
 @include fsc.normalize();
 @include fsc.core();
-
+@include fsc.roboto();
 
 $my-typography: mat.define-typography-config($font-family: 'Roboto-local');
 
-mat.$theme-ignore-duplication-warnings: true;
-
 // Define a dark theme
 $dark-theme: mat.define-dark-theme((color: (primary: mat.define-palette(palettes.$md-primary),
         accent: mat.define-palette(palettes.$md-accent),
@@ -37,7 +35,7 @@ $light-theme: mat.define-light-theme((color: (primary: mat.define-palette(palett
 @media (prefers-color-scheme: light) {
   // Use the `-color` mixins to only apply color styles without reapplying the same
   // typography and density styles.
-  @include mat.all-component-themes($light-theme);
+  @include mat.all-component-colors($light-theme);
   @include fsc.all-component-themes($light-theme);
 }
 

projects/lib-workspace/src/styling/roboto.scss

@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use 'sass:map';
 
-@forward 'theme' show all-component-themes,
+@forward 'theming' show all-component-themes,
 core,
-normalize;
+normalize;
+@forward './styles/fonts/roboto' show roboto;

projects/ng-mat-components/_index.scss

@@ -4,9 +4,10 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
+  "inlineStyleLanguage": "scss",
   "assets": [
     "_index.scss",
-    "_theme.scss",
-    "./assets/fonts/roboto.scss"
+    "_theming.scss",
+    "./styles/fonts/_roboto.scss"
   ]
 }

projects/ng-mat-components/_theme.scss renamed to projects/ng-mat-components/_theming.scss

@@ -3,9 +3,9 @@
   "version": "0.0.0-PLACEHOLDER",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@angular/common": "^13.0.0",
-    "@angular/core": "^13.0.0",
-    "@angular/material": "^13.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/material": "^14.0.0",
     "date-fns": "^2.29.3"
   },
   "dependencies": {
@@ -33,8 +33,14 @@
     ".": {
       "sass": "./_index.scss"
     },
+    "./theming": {
+      "sass": "./_theming.scss"
+    },
+    "./_theming": {
+      "sass": "./_theming.scss"
+    },
     "./fonts/roboto": {
-      "sass": "./assets/fonts/roboto.scss"
+      "sass": "./styles/fonts/_roboto.scss"
     }
   }
 }