feat!: update to angular 17 (#480)

* feat!: update to angular 17

* chore(deps): re-build lock file

* ci: update to node 18

* Sync with new Angular 17 project config

---------

Co-authored-by: Daniel Kimmich <[email protected]>
Co-authored-by: jfcere <[email protected]>

.circleci/config.yml

@@ -4,7 +4,7 @@ orbs:
 jobs:
   build:
     docker:
-      - image: cimg/node:16.15-browsers
+      - image: cimg/node:18.18-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:16.15
+      - image: cimg/node:18.18
     steps:
       # Checkout the code from the branch into the working_directory
       - checkout

angular.json

@@ -15,11 +15,11 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/demo",
             "index": "demo/src/index.html",
-            "main": "demo/src/main.ts",
+            "browser": "demo/src/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -28,6 +28,7 @@
               "demo/src/favicon.ico",
               "demo/src/assets",
               "demo/src/app/bindings/remote",
+              "demo/src/app/cheat-sheet/remote",
               "demo/src/app/syntax-highlight/remote",
               "demo/src/app/plugins/remote"
             ],
@@ -88,12 +89,9 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"
@@ -102,10 +100,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "demo:build:production"
+              "buildTarget": "demo:build:production"
             },
             "development": {
-              "browserTarget": "demo:build:development"
+              "buildTarget": "demo:build:development"
             }
           },
           "defaultConfiguration": "development"

demo/src/app/bindings/bindings.component.html

@@ -14,7 +14,7 @@ <h2 id="remote-url">Remote Url</h2>
       Using component with static `python` code block
     </markdown>
 
-    <markdown>{{ demoPython | language: 'python' }}</markdown>
+    <markdown [data]="demoPython$ | async | language: 'python'"></markdown>
 
     <markdown>
       Using directive with `src` property to fetch remote html file `app/bindings/remote/demo.html`

demo/src/app/bindings/bindings.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
+import { HttpRawLoaderService } from '@shared/http-raw-loader';
 
 @Component({
   selector: 'app-bindings',
@@ -9,8 +10,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular
 export class BindingsComponent implements OnInit {
 
   // remote url
-  demoPython = require('raw-loader!./remote/demo.py').default;
-  languagePipe = require('raw-loader!./remote/language-pipe.html').default;
+  demoPython$ = this.rawLoaderService.get('app/bindings/remote/demo.py');
 
   // variable-binding
   markdown =
@@ -46,6 +46,7 @@ export class MarkdownDemoComponent {
 
   constructor(
     private elementRef: ElementRef<HTMLElement>,
+    private rawLoaderService: HttpRawLoaderService,
   ) { }
 
   ngOnInit(): void {

demo/src/app/bindings/bindings.module.ts

@@ -3,6 +3,7 @@ import { FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MarkdownModule } from 'ngx-markdown';
 
+import { HttpRawLoaderModule } from '@shared/http-raw-loader';
 import { ScrollspyNavLayoutModule } from '@shared/scrollspy-nav-layout/scrollspy-nav-layout.module';
 import { SharedModule } from '@shared/shared.module';
 import { BindingsRoutingModule } from './bindings-routing.module';
@@ -12,6 +13,7 @@ import { BindingsComponent } from './bindings.component';
   imports: [
     BindingsRoutingModule,
     FormsModule,
+    HttpRawLoaderModule,
     MarkdownModule.forChild(),
     MatInputModule,
     ScrollspyNavLayoutModule,

demo/src/app/cheat-sheet/cheat-sheet.component.html

@@ -7,58 +7,58 @@ <h1>Cheat Sheet</h1>
 
   <section>
     <h2 id="headers">Headers</h2>
-    <pre class="language-none">{{ headers }}</pre>
-    <markdown>{{ headers }}</markdown>
+    <pre class="language-none">{{ headers$ | async }}</pre>
+    <markdown [data]="headers$ | async"></markdown>
   </section>
 
   <section>
     <h2 id="emphasis">Emphasis</h2>
-    <pre class="language-none">{{ emphasis }}</pre>
-    <markdown>{{ emphasis }}</markdown>
+    <pre class="language-none">{{ emphasis$ | async }}</pre>
+    <markdown [data]="emphasis$ | async"></markdown>
   </section>
 
   <section>
     <h2 id="lists">Lists</h2>
     <p>
       In this example, leading and trailing spaces are shown with with dots (⋅)
     </p>
-    <pre class="language-none">{{ listsDot }}</pre>
-    <markdown>{{ lists }}</markdown>
+    <pre class="language-none">{{ listsDot$ | async }}</pre>
+    <markdown [data]="lists$ | async"></markdown>
   </section>
 
   <section>
     <h2 id="links">Links</h2>
-    <pre class="language-none">{{ links }}</pre>
-    <markdown>{{ links }}</markdown>
+    <pre class="language-none">{{ links$ | async }}</pre>
+    <markdown [data]="links$ | async"></markdown>
   </section>
 
   <section>
     <h2 id="images">Images</h2>
-    <pre class="language-none">{{ images }}</pre>
-    <markdown>{{ images }}</markdown>
+    <pre class="language-none">{{ images$ | async }}</pre>
+    <markdown [data]="images$ | async"></markdown>
   </section>
 
   <section>
     <h2 id="code-and-synthax">Code and Syntax Highlighting</h2>
-    <pre class="language-none">{{ codeAndSynthaxHighlighting }}</pre>
-    <markdown>{{ codeAndSynthaxHighlighting }}</markdown>
+    <pre class="language-none">{{ codeAndSynthaxHighlighting$ | async }}</pre>
+    <markdown [data]="codeAndSynthaxHighlighting$ | async"></markdown>
   </section>
 
   <section>
     <h2 id="tables">Tables</h2>
-    <pre class="language-none">{{ tables }}</pre>
-    <markdown>{{ tables }}</markdown>
+    <pre class="language-none">{{ tables$ | async }}</pre>
+    <markdown [data]="tables$ | async"></markdown>
   </section>
 
   <section>
     <h2 id="blockquotes">Blockquotes</h2>
-    <pre class="language-none">{{ blockquotes }}</pre>
-    <markdown>{{ blockquotes }}</markdown>
+    <pre class="language-none">{{ blockquotes$ | async }}</pre>
+    <markdown [data]="blockquotes$ | async"></markdown>
   </section>
 
   <section>
     <h2 id="horizontal-rule">Horizontal Rule</h2>
-    <pre class="language-none">{{ horizontalRule }}</pre>
-    <markdown>{{ horizontalRule }}</markdown>
+    <pre class="language-none">{{ horizontalRule$ | async }}</pre>
+    <markdown [data]="horizontalRule$ | async"></markdown>
   </section>
 </app-scrollspy-nav-layout>

demo/src/app/cheat-sheet/cheat-sheet.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
+import { HttpRawLoaderService } from '@shared/http-raw-loader';
 
 @Component({
   selector: 'app-cheat-sheet',
@@ -8,21 +9,22 @@ import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular
 })
 export class CheatSheetComponent implements OnInit {
 
-  blockquotes = require('raw-loader!./markdown/blockquotes.md').default;
-  codeAndSynthaxHighlighting = require('raw-loader!./markdown/code-and-synthax-highlighting.md').default;
-  emphasis = require('raw-loader!./markdown/emphasis.md').default;
-  headers = require('raw-loader!./markdown/headers.md').default;
-  horizontalRule = require('raw-loader!./markdown/horizontal-rule.md').default;
-  images = require('raw-loader!./markdown/images.md').default;
-  links = require('raw-loader!./markdown/links.md').default;
-  lists = require('raw-loader!./markdown/lists.md').default;
-  listsDot = require('raw-loader!./markdown/lists-dot.md').default;
-  tables = require('raw-loader!./markdown/tables.md').default;
+  blockquotes$ = this.rawLoaderService.get('app/cheat-sheet/remote/blockquotes.md');
+  codeAndSynthaxHighlighting$ = this.rawLoaderService.get('app/cheat-sheet/remote/code-and-synthax-highlighting.md');
+  emphasis$ = this.rawLoaderService.get('app/cheat-sheet/remote/emphasis.md');
+  headers$ = this.rawLoaderService.get('app/cheat-sheet/remote/headers.md');
+  horizontalRule$ = this.rawLoaderService.get('app/cheat-sheet/remote/horizontal-rule.md');
+  images$ = this.rawLoaderService.get('app/cheat-sheet/remote/images.md');
+  links$ = this.rawLoaderService.get('app/cheat-sheet/remote/links.md');
+  lists$ = this.rawLoaderService.get('app/cheat-sheet/remote/lists.md');
+  listsDot$ = this.rawLoaderService.get('app/cheat-sheet/remote/lists-dot.md');
+  tables$ = this.rawLoaderService.get('app/cheat-sheet/remote/tables.md');
 
   headings: Element[] | undefined;
 
   constructor(
     private elementRef: ElementRef<HTMLElement>,
+    private rawLoaderService: HttpRawLoaderService,
   ) { }
 
   ngOnInit(): void {

demo/src/app/cheat-sheet/cheat-sheet.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { MarkdownModule } from 'ngx-markdown';
 
+import { HttpRawLoaderModule } from '@shared/http-raw-loader';
 import { ScrollspyNavLayoutModule } from '@shared/scrollspy-nav-layout/scrollspy-nav-layout.module';
 import { SharedModule } from '@shared/shared.module';
 import { CheatSheetRoutingModule } from './cheat-sheet-routing.module';
@@ -9,6 +10,7 @@ import { CheatSheetComponent } from './cheat-sheet.component';
 @NgModule({
   imports: [
     CheatSheetRoutingModule,
+    HttpRawLoaderModule,
     MarkdownModule.forChild(),
     ScrollspyNavLayoutModule,
     SharedModule,

demo/src/app/plugins/plugins.component.html

@@ -76,7 +76,7 @@ <h2 id="line-numbers">Line Numbers plugin</h2>
 
       function square(number) &#123;
         return number * number;
-      }
+      &#125;
       ```
     </markdown>
 
@@ -101,8 +101,8 @@ <h2 id="line-numbers">Line Numbers plugin</h2>
           n = Math.pow(possible, n);
           if (Math.abs(x - n) < 1 && (x > 0 == n > 0))
             return negate ? -possible : possible;
-        } catch (e) &#123; }
-      }
+        &#125; catch (e) &#123; &#125;
+      &#125;
       ```
     </markdown>
   </section>
@@ -150,8 +150,8 @@ <h2 id="line-highlight">Line Highlight plugin</h2>
           n = Math.pow(possible, n);
           if (Math.abs(x - n) < 1 && (x > 0 == n > 0))
             return negate ? -possible : possible;
-        } catch (e) &#123; }
-      }
+        &#125; catch (e) &#123; &#125;
+      &#125;
       ```
     </markdown>
   </section>
@@ -305,15 +305,15 @@ <h2 id="katex">KaTeX plugin</h2>
 
       **example.component.ts**
       ```typescript
-      import &#123; KatexOptions } from 'ngx-markdown';
+      import &#123; KatexOptions &#125; from 'ngx-markdown';
 
       public options: KatexOptions = &#123;
         displayMode: true,
         throwOnError: false,
         errorColor: '#cc0000',
         delimiters: [...],
         ...
-      };
+      &#125;;
       ```
 
       **example.component.html**
@@ -361,14 +361,14 @@ <h2 id="mermaid">Mermaid plugin</h2>
 
       **example.component.ts**
       ```typescript
-      import &#123; MermaidAPI } from 'ngx-markdown';
+      import &#123; MermaidAPI &#125; from 'ngx-markdown';
 
       public options: MermaidAPI.Config = &#123;
         fontFamily: '"trebuchet ms", verdana, arial, sans-serif',
         logLevel: MermaidAPI.LogLevel.Info,
         theme: MermaidAPI.Theme.Dark,
         ...
-      };
+      &#125;;
       ```
 
       **example.component.html**
@@ -424,20 +424,20 @@ <h2 id="clipboard">Clipboard plugin</h2>
         padding: 4px 0;
         width: 50px;
         transition: all 250ms ease-out;
-      }
+      &#125;
 
       .markdown-clipboard-button:hover &#123;
         background-color: rgba(255, 255, 255, 0.14);
-      }
+      &#125;
 
       .markdown-clipboard-button:active &#123;
         transform: scale(0.95);
-      }
+      &#125;
 
       .markdown-clipboard-button.copied &#123;
         background-color: rgba(0, 255, 0, 0.1);
         color: #00ff00;
-      }
+      &#125;
       ```
     </markdown>
 
@@ -453,9 +453,9 @@ <h2 id="clipboard">Clipboard plugin</h2>
           provide: ClipboardOptions,
           useValue: &#123;
             buttonComponent: ClipboardButtonComponent,
-          },
-        },
-      }),
+          &#125;,
+        &#125;,
+      &#125;),
       ```
     </markdown>
 
@@ -465,26 +465,26 @@ <h2 id="clipboard">Clipboard plugin</h2>
       You can also provide your custom component using the `clipboardButtonComponent` input property when using the `clipboard` directive.
 
       ```typescript
-      import &#123; Component } from '@angular/core';
+      import &#123; Component &#125; from '&#64;angular/core';
 
-      @Component(&#123;
+      &#64;Component(&#123;
         selector: 'app-clipboard-button',
         template: `&lt;button (click)="onClick()">Copy&lt;/button>`,
-      })
+      &#125;)
       export class ClipboardButtonComponent &#123;
         onClick() &#123;
           alert('Copied to clipboard!');
-        }
-      }
+        &#125;
+      &#125;
       ```
 
       ```typescript
-      import &#123; ClipboardButtonComponent } from './clipboard-button-component';
+      import &#123; ClipboardButtonComponent &#125; from './clipboard-button-component';
 
-      @Component(&#123; ... })
+      &#64;Component(&#123; ... &#125;)
       export class ExampleComponent &#123;
         readonly clipboardButton = ClipboardButtonComponent;
-      }
+      &#125;
       ```
 
       ```html