Adding support for Angular 17.

Author: travist

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formio-angular-demo",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --configuration development",
@@ -13,35 +13,35 @@
     "deploy": "npm run builddemo; cd dist; git init; git remote add origin git@github.com:formio/angular-demo.git; git checkout -b gh-pages; git add -A; git commit -m 'Update demo application'; git push -f origin gh-pages;"
   },
   "dependencies": {
-    "@angular/animations": "^16.0.5",
-    "@angular/common": "^16.0.5",
-    "@angular/compiler": "^16.0.5",
-    "@angular/core": "^16.0.5",
-    "@angular/elements": "^16.0.5",
-    "@angular/forms": "^16.0.5",
-    "@angular/platform-browser": "^16.0.5",
-    "@angular/platform-browser-dynamic": "^16.0.5",
-    "@angular/router": "^16.0.5",
-    "@formio/angular": "^6.0.0",
+    "@angular/animations": "^17.0.8",
+    "@angular/common": "^17.0.8",
+    "@angular/compiler": "^17.0.8",
+    "@angular/core": "^17.0.8",
+    "@angular/elements": "^17.0.8",
+    "@angular/forms": "^17.0.8",
+    "@angular/platform-browser": "^17.0.8",
+    "@angular/platform-browser-dynamic": "^17.0.8",
+    "@angular/router": "^17.0.8",
+    "@formio/angular": "^7.0.0",
     "bootstrap": "4",
     "bootswatch": "^4.5.3",
     "core-js": "^3.8.1",
     "font-awesome": "^4.7.0",
     "formiojs": "^4.18.0",
     "jquery": "^3.7.1",
-    "ngx-bootstrap": "^10.2.0",
+    "ngx-bootstrap": "^12.0.0",
     "popper.js": "^1.16.1",
     "prism-themes": "^1.5.0",
     "prismjs": "^1.22.0",
     "rxjs": "^7.8.0",
-    "zone.js": "^0.13.0"
+    "zone.js": "^0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.5",
-    "@angular/cli": "^16.0.5",
-    "@angular/compiler-cli": "^16.0.5",
-    "@angular/language-service": "^16.0.5",
-    "@types/jasmine": "^4.3.2",
+    "@angular-devkit/build-angular": "^17.0.9",
+    "@angular/cli": "^17.0.9",
+    "@angular/compiler-cli": "^17.0.8",
+    "@angular/language-service": "^17.0.8",
+    "@types/jasmine": "^5.1.4",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^20.2.5",
     "codelyzer": "^6.0.1",
@@ -55,6 +55,6 @@
     "protractor": "~7.0.0",
     "ts-node": "^10.9.1",
     "tslint": "^6.1.3",
-    "typescript": "5.0.4"
+    "typescript": "~5.2.0"
   }
 }

src/app/auth/login/login.component.html

@@ -1,7 +1,7 @@
 <div class="alert alert-info">
   <p>You can use the following to login.</p>
   <ul>
-    <li><strong>Email:</strong> demo@form.io</li>
+    <li><strong>Email:</strong> demo&#64;form.io</li>
     <li><strong>Password:</strong> testing</li>
   </ul>
 </div>

src/app/forms/builder/builder.component.html

@@ -4,12 +4,12 @@ <h3>Dynamic JSON Form Builder</h3>
 <strong>builder.html</strong>
 <pre class="text-center"><code class="language-markup">&lt;form-builder [form]="form" (change)="onChange($event)"&gt;&lt;/form-builder&gt;</code></pre>
 <strong>builder.ts</strong>
-<pre><code class="language-javascript">import &#123; Component, ElementRef, ViewChild &#125; from '@angular/core';
-@Component(&#123;
+<pre><code class="language-javascript">import &#123; Component, ElementRef, ViewChild &#125; from '&#64;angular/core';
+&#64;Component(&#123;
   template: require('./builder.html')
 &#125;)
 export class BuilderComponent &#123;
-  @ViewChild('json') jsonElement?: ElementRef;
+  &#64;ViewChild('json') jsonElement?: ElementRef;
   public form: Object = &#123;components: []&#125;;
   onChange(event) &#123;
     console.log(event.form);

src/app/forms/renderer/renderer.component.html

@@ -76,7 +76,7 @@
   data: {
     firstName: 'Joe',
     lastName: 'Smith',
-    email: 'joe@example.com'
+    email: 'joe@example.com'
   }
 &#125;"&gt;&lt;/formio&gt;</code></pre>
     </div>
@@ -116,7 +116,7 @@ <h5 class="card-title">Result</h5>
             data: {
               firstName: 'Joe',
               lastName: 'Smith',
-              email: 'joe@example.com'
+              email: 'joe&#64;example.com'
             }
           }"></formio>
         </div>

src/polyfills.ts

@@ -71,7 +71,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';;  // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS