feat!: update to angular 18 (#522)

* feat!: update to angular 18 (#521) * Adjustment to match newly created Angular 18 project --------- Co-authored-by: pkurc <[email protected]> Co-authored-by: pkurc <[email protected]>
jfcere · May 26, 2024 · 8617d1e · 8617d1e
1 parent 2074c8e
commit 8617d1e
Show file tree

Hide file tree

Showing 29 changed files with 3,490 additions and 2,976 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -4,7 +4,7 @@ orbs:
 jobs:
   build:
     docker:
-      - image: cimg/node:18.18-browsers
+      - image: cimg/node:20.13-browsers
     steps:
       # Install chrome via browser tools
       - browser-tools/install-chrome
@@ -55,7 +55,7 @@ jobs:
           command: yarn build:lib
   deploy:
     docker:
-      - image: cimg/node:18.18
+      - image: cimg/node:20.13
     steps:
       # Checkout the code from the branch into the working_directory
       - checkout

diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
 # Compiled output
 /dist

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img alt="Ngx-Markdown Logo" src="https://github.com/jfcere/ngx-markdown/raw/master/demo/src/assets/ngx-markdown.png">
+  <img alt="Ngx-Markdown Logo" src="https://github.com/jfcere/ngx-markdown/raw/master/demo/public/ngx-markdown.png">
 </p>
 <p align="center">
   <a href="https://circleci.com/gh/jfcere/ngx-markdown">

diff --git a/angular.json b/angular.json
@@ -25,8 +25,10 @@
             ],
             "tsConfig": "demo/tsconfig.app.json",
             "assets": [
-              "demo/src/favicon.ico",
-              "demo/src/assets",
+              {
+                "glob": "**/*",
+                "input": "demo/public"
+              },
               "demo/src/app/bindings/remote",
               "demo/src/app/cheat-sheet/remote",
               "demo/src/app/syntax-highlight/remote",
@@ -76,13 +78,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "2MB",
+                  "maximumError": "5MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "6kB",
+                  "maximumError": "10kB"
                 }
               ],
               "outputHashing": "all"

diff --git a/demo/public/favicon.ico b/demo/public/favicon.ico
diff --git a/demo/src/assets/icon-bindings.svg → demo/public/icon-bindings.svg b/demo/src/assets/icon-bindings.svg → demo/public/icon-bindings.svg
diff --git a/demo/src/assets/icon-cheat-sheet.svg → demo/public/icon-cheat-sheet.svg b/demo/src/assets/icon-cheat-sheet.svg → demo/public/icon-cheat-sheet.svg
diff --git a/demo/src/assets/icon-chevron-up.svg → demo/public/icon-chevron-up.svg b/demo/src/assets/icon-chevron-up.svg → demo/public/icon-chevron-up.svg
diff --git a/demo/src/assets/icon-get-started.svg → demo/public/icon-get-started.svg b/demo/src/assets/icon-get-started.svg → demo/public/icon-get-started.svg
diff --git a/demo/src/assets/icon-github.svg → demo/public/icon-github.svg b/demo/src/assets/icon-github.svg → demo/public/icon-github.svg
diff --git a/demo/src/assets/icon-light-off.svg → demo/public/icon-light-off.svg b/demo/src/assets/icon-light-off.svg → demo/public/icon-light-off.svg
diff --git a/demo/src/assets/icon-light-on.svg → demo/public/icon-light-on.svg b/demo/src/assets/icon-light-on.svg → demo/public/icon-light-on.svg
diff --git a/demo/src/assets/icon-plugins.svg → demo/public/icon-plugins.svg b/demo/src/assets/icon-plugins.svg → demo/public/icon-plugins.svg
diff --git a/demo/src/assets/icon-re-render.svg → demo/public/icon-re-render.svg b/demo/src/assets/icon-re-render.svg → demo/public/icon-re-render.svg
diff --git a/demo/src/assets/icon-syntax-highlight.svg → demo/public/icon-syntax-highlight.svg b/demo/src/assets/icon-syntax-highlight.svg → demo/public/icon-syntax-highlight.svg
diff --git a/demo/src/assets/ngx-markdown.png → demo/public/ngx-markdown.png b/demo/src/assets/ngx-markdown.png → demo/public/ngx-markdown.png
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -4,12 +4,12 @@ <h1>ngx-markdown</h1>
     <span fxFlex></span>
     <button mat-icon-button (click)="toggleTheme()">
       <mat-icon>
-        <img [hidden]="theme === 'light'" src="assets/icon-light-on.svg">
-        <img [hidden]="theme === 'dark'" src="assets/icon-light-off.svg">
+        <img [hidden]="theme === 'light'" src="icon-light-on.svg">
+        <img [hidden]="theme === 'dark'" src="icon-light-off.svg">
       </mat-icon>
     </button>
     <a mat-icon-button href="https://github.com/jfcere/ngx-markdown">
-      <img class="github-icon" src="assets/icon-github.svg">
+      <img class="github-icon" src="icon-github.svg">
     </a>
   </mat-toolbar-row>
 </mat-toolbar>
@@ -20,7 +20,7 @@ <h1>ngx-markdown</h1>
     [routerLink]="route.path"
     routerLinkActive>
     <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="8px">
-      <img src="assets/icon-{{route.path}}.svg">
+      <img src="icon-{{route.path}}.svg">
       <span>{{ route.data?.['label'] }}</span>
     </div>
   </a>

diff --git a/demo/src/app/app.component.theme.scss b/demo/src/app/app.component.theme.scss
@@ -2,10 +2,10 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
-  $color-config: mat.get-color-config($theme);
+  $color-config: mat.m2-get-color-config($theme);
 
   $primary-palette: map.get($color-config, 'primary');
-  $primary-color: mat.get-color-from-palette($primary-palette, 'default');
+  $primary-color: mat.m2-get-color-from-palette($primary-palette, 'default');
 
   .mat-toolbar.mat-primary {
     background: linear-gradient(90deg, $primary-color 15%, darken($primary-color, 4%) 100%);

diff --git a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.html b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.html
@@ -8,13 +8,13 @@
       </markdown>
     </div>
     <button class="scrollup-button--fixed" mat-fab color="accent" fxHide.gt-sm (click)="onScrollUp()" *ngIf="showScrollUpButton" [@zoomAnimation]>
-      <img src="assets/icon-chevron-up.svg">
+      <img src="icon-chevron-up.svg">
     </button>
   </div>
   <div class="sticky" fxLayout="column" fxFlex="1 0 180px" fxFlexAlign="flex-start" fxHide.lt-md>
     <app-scrollspy-nav [headings]="headings"></app-scrollspy-nav>
     <button class="scrollup-button" mat-mini-fab color="accent" (click)="onScrollUp()" *ngIf="showScrollUpButton" [@zoomAnimation]>
-      <img src="assets/icon-chevron-up.svg">
+      <img src="icon-chevron-up.svg">
     </button>
   </div>
 </div>
diff --git a/demo/src/app/shared/scrollspy-nav/scrollspy-nav.component.theme.scss b/demo/src/app/shared/scrollspy-nav/scrollspy-nav.component.theme.scss
@@ -2,10 +2,10 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
-  $color-config: mat.get-color-config($theme);
+  $color-config: mat.m2-get-color-config($theme);
 
   $accent-palette: map.get($color-config, 'accent');
-  $accent-color: mat.get-color-from-palette($accent-palette, 'default');
+  $accent-color: mat.m2-get-color-from-palette($accent-palette, 'default');
   $foreground-palette: map.get($color-config, 'foreground');
   $foreground-text: map.get($foreground-palette, 'text');
 

diff --git a/demo/src/favicon.ico b/demo/src/favicon.ico
diff --git a/demo/src/scss/_dark-theme.scss b/demo/src/scss/_dark-theme.scss
@@ -1,11 +1,11 @@
 @use '@angular/material' as mat;
 @use 'typography' as typography;
 
-$dark-primary: mat.define-palette(mat.$grey-palette, 900, 300, 700);
-$dark-accent: mat.define-palette(mat.$light-blue-palette);
-$dark-warn: mat.define-palette(mat.$red-palette);
+$dark-primary: mat.m2-define-palette(mat.$m2-grey-palette, 900, 300, 700);
+$dark-accent: mat.m2-define-palette(mat.$m2-light-blue-palette);
+$dark-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
-$theme: mat.define-dark-theme((
+$theme: mat.m2-define-dark-theme((
   color: (
     primary: $dark-primary,
     accent: $dark-accent,

diff --git a/demo/src/scss/_light-theme.scss b/demo/src/scss/_light-theme.scss
@@ -2,8 +2,8 @@
 @use '@angular/material' as mat;
 @use 'typography' as typography;
 
-$dark-text: map.get(mat.$light-theme-foreground-palette, text);
-$light-text: map.get(mat.$dark-theme-foreground-palette, text);
+$dark-text: map.get(mat.$m2-light-theme-foreground-palette, text);
+$light-text: map.get(mat.$m2-dark-theme-foreground-palette, text);
 
 $primary-palette: (
   50 : #d6ebff,
@@ -38,11 +38,11 @@ $primary-palette: (
   )
 );
 
-$light-primary: mat.define-palette($primary-palette);
-$light-accent: mat.define-palette($primary-palette);
-$light-warn: mat.define-palette(mat.$red-palette);
+$light-primary: mat.m2-define-palette($primary-palette);
+$light-accent: mat.m2-define-palette($primary-palette);
+$light-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
-$theme: mat.define-light-theme((
+$theme: mat.m2-define-light-theme((
   color: (
     primary: $light-primary,
     accent: $light-accent,

diff --git a/demo/src/scss/_typography.scss b/demo/src/scss/_typography.scss
@@ -1,9 +1,9 @@
 @use '@angular/material' as mat;
 
 $font-family: "Google Sans", "Helvetica Neue", sans-serif;
-$body-1: mat.define-typography-level($font-size: 15px);
+$body-1: mat.m2-define-typography-level($font-size: 15px);
 
-$mat-typography-config: mat.define-typography-config(
+$mat-typography-config: mat.m2-define-typography-config(
   $font-family,
   $body-1,
-);
+);
diff --git a/demo/src/scss/material-theme.scss b/demo/src/scss/material-theme.scss
@@ -11,7 +11,7 @@
 @use '../app/shared/scrollspy-nav/scrollspy-nav.component.theme' as scrollspy-nav-component;
 
 @mixin native-element-theme($theme) {
-  $color-config: mat.get-color-config($theme);
+  $color-config: mat.m2-get-color-config($theme);
 
   $primary-palette: map.get($color-config, 'primary');
   $accent-palette: map.get($color-config, 'accent');
@@ -21,7 +21,7 @@
   a:active,
   a:focus,
   a:visited {
-    color: mat.get-color-from-palette($accent-palette, A400);
+    color: mat.m2-get-color-from-palette($accent-palette, A400);
     text-decoration: none;
   }
 
@@ -30,36 +30,36 @@
   }
 
   blockquote {
-    background: mat.get-color-from-palette($primary-palette, 300, 0.14);
-    border-left: 4px solid mat.get-color-from-palette($accent-palette, 'default');
+    background: mat.m2-get-color-from-palette($primary-palette, 300, 0.14);
+    border-left: 4px solid mat.m2-get-color-from-palette($accent-palette, 'default');
     border-radius: 4px;
-    color: utils.soften-color(mat.get-color-from-palette($foreground-palette, 'base'), 40%);
+    color: utils.soften-color(mat.m2-get-color-from-palette($foreground-palette, 'base'), 40%);
     margin: 20px 0;
     padding: 1px 20px;
   }
 
   code:not([class*="language-"]) {
-    background: mat.get-color-from-palette($foreground-palette, 'secondary-text', 0.07);
+    background: mat.m2-get-color-from-palette($foreground-palette, 'secondary-text', 0.07);
     border-radius: 3px;
     font-size: 0.94em;
     padding: 0px 6px 2px;
     overflow-wrap: break-word;
   }
 
   hr {
-    border-color: mat.get-color-from-palette($foreground-palette, 'divider');
+    border-color: mat.m2-get-color-from-palette($foreground-palette, 'divider');
     border-style: solid;
     border-width: 1px 0 0 0;
   }
 
   table {
     th {
-      color: mat.get-color-from-palette($foreground-palette, 'secondary-text');
+      color: mat.m2-get-color-from-palette($foreground-palette, 'secondary-text');
     }
 
     td,
     th {
-      border-bottom-color: mat.get-color-from-palette($foreground-palette, 'divider');
+      border-bottom-color: mat.m2-get-color-from-palette($foreground-palette, 'divider');
     }
   }
 }

diff --git a/lib/package.json b/lib/package.json
@@ -30,9 +30,9 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/platform-browser": "^17.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
     "marked": ">= 9.0.0 < 13.0.0",
     "rxjs": "^6.5.3 || ^7.4.0",
     "zone.js": "~0.14.0"

diff --git a/package.json b/package.json
@@ -48,17 +48,17 @@
     "publish:beta": "npm publish ./dist/lib --tag beta"
   },
   "dependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/cdk": "^17.0.0",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.0.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
     "@angular/flex-layout": "15.0.0-beta.42",
-    "@angular/forms": "^17.0.0",
-    "@angular/material": "^17.0.0",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/router": "^17.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
     "clipboard": "^2.0.11",
     "emoji-toolkit": "^8.0.0",
     "gumshoejs": "^5.1.2",
@@ -71,18 +71,18 @@
     "prismjs": "^1.29.0",
     "rxjs": "~6.5.3",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.2"
+    "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular-eslint/builder": "~17.0.0",
-    "@angular-eslint/eslint-plugin": "~17.0.0",
-    "@angular-eslint/eslint-plugin-template": "~17.0.0",
-    "@angular-eslint/schematics": "~17.0.0",
-    "@angular-eslint/template-parser": "~17.0.0",
-    "@angular/cli": "~17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/language-service": "^17.0.0",
+    "@angular-devkit/build-angular": "^18.0.1",
+    "@angular-eslint/builder": "~17.5.1",
+    "@angular-eslint/eslint-plugin": "~17.5.1",
+    "@angular-eslint/eslint-plugin-template": "~17.5.1",
+    "@angular-eslint/schematics": "~17.5.1",
+    "@angular-eslint/template-parser": "~17.5.1",
+    "@angular/cli": "~18.0.1",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/language-service": "^18.0.0",
     "@types/jasmine": "~5.1.0",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
@@ -92,7 +92,7 @@
     "eslint": "^8.53.0",
     "eslint-import-resolver-typescript": "~3.5.2",
     "eslint-plugin-import": "~2.26.0",
-    "eslint-plugin-jsdoc": "~39.6.2",
+    "eslint-plugin-jsdoc": "48.2.6",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
@@ -102,8 +102,8 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "karma-junit-reporter": "^2.0.1",
     "linklocal": "^2.8.2",
-    "ng-packagr": "^17.0.0",
+    "ng-packagr": "^18.0.0",
     "rimraf": "^2.7.0",
-    "typescript": "~5.2.2"
+    "typescript": "~5.4.2"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,18 +4,18 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
     "esModuleInterop": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",