Update ng-flutter embedding example to Angular v17 (#2081)

This should also fix the dependabot security alert currently open
against the repository
(https://github.com/flutter/samples/security/dependabot/8).

web_embedding/ng-flutter/README.md

@@ -42,9 +42,9 @@ a moderately recent version of Angular:
 ```console
 $ ng version
 
-Angular CLI: 16.0.1
-Node: 18.16.0
-Package Manager: npm 9.5.1
+Angular CLI: 17.0.0
+Node: 20.9.0
+Package Manager: npm 10.1.0
 OS: linux x64
 ```
 
@@ -53,10 +53,10 @@ And Flutter:
 ```
 $ flutter --version
 
-Flutter 3.10.0-12.0.pre.38 • channel master
-Framework • revision 1a51dc2131 (8 days ago) • 2023-04-24 12:25:21 -0700
-Engine • revision 5fbde6c0fc
-Tools • Dart 3.1.0 (build 3.1.0-35.0.dev) • DevTools 2.23.1
+Flutter 3.13.9 • channel stable
+Framework • revision d211f42860 (2 weeks ago) • 2023-10-25 13:42:25 -0700
+Engine • revision 0545f8705d
+Tools • Dart 3.1.5 • DevTools 2.25.0
 ```
 
 **Ensure `npm`, `ng` and `flutter` are present in your `$PATH`.**

web_embedding/ng-flutter/angular.json

@@ -72,10 +72,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "ng-flutter:build:production"
+              "buildTarget": "ng-flutter:build:production"
             },
             "development": {
-              "browserTarget": "ng-flutter:build:development"
+              "buildTarget": "ng-flutter:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -83,7 +83,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "ng-flutter:build"
+            "buildTarget": "ng-flutter:build"
           }
         },
         "test": {

web_embedding/ng-flutter/package.json

@@ -11,31 +11,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.1.8",
-    "@angular/cdk": "^16.1.7",
-    "@angular/common": "^16.1.8",
-    "@angular/compiler": "^16.1.8",
-    "@angular/core": "^16.1.8",
-    "@angular/forms": "^16.1.8",
-    "@angular/material": "^16.1.7",
-    "@angular/platform-browser": "^16.1.8",
-    "@angular/platform-browser-dynamic": "^16.1.8",
-    "@angular/router": "^16.1.8",
+    "@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/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",
     "rxjs": "~7.8.1",
-    "tslib": "^2.6.1",
-    "zone.js": "~0.13.0"
+    "tslib": "^2.6.2",
+    "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.1.8",
-    "@angular/cli": "~16.1.8",
-    "@angular/compiler-cli": "^16.1.8",
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular/cli": "~17.0.0",
+    "@angular/compiler-cli": "^17.0.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~4.6.0",
     "karma": "~6.4.2",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~5.1.6"
-  }
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.2.2"
+  },
+  "sideEffects": false
 }

web_embedding/ng-flutter/src/app/app.component.ts

@@ -57,27 +57,32 @@ import { MatInputModule } from '@angular/material/input';
             <mat-option value="dash">Custom App</mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field appearance="outline" *ngIf="this.flutterState?.getScreen() == 'counter'">
-          <mat-label>Clicks</mat-label>
-          <input type="number" matInput (input)="onCounterSet($event)" [value]="this.flutterState?.getClicks()" />
-        </mat-form-field>
-        <mat-form-field appearance="outline" *ngIf="this.flutterState?.getScreen() != 'counter'">
-          <mat-label>Text</mat-label>
-          <input type="text" matInput (input)="onTextSet($event)" [value]="this.flutterState?.getText()" />
-          <button *ngIf="this.flutterState?.getText()" matSuffix mat-icon-button aria-label="Clear" (click)="this.flutterState?.setText('')">
-            <mat-icon>close</mat-icon>
-          </button>
-        </mat-form-field>
+        @if (this.flutterState?.getScreen() === 'counter') {
+          <mat-form-field appearance="outline">
+            <mat-label>Clicks</mat-label>
+            <input type="number" matInput (input)="onCounterSet($event)" [value]="this.flutterState?.getClicks()" />
+          </mat-form-field>
+        } @else {
+          <mat-form-field appearance="outline">
+            <mat-label>Text</mat-label>
+            <input type="text" matInput (input)="onTextSet($event)" [value]="this.flutterState?.getText()" />
+            @if (this.flutterState?.getText()) {
+              <button matSuffix mat-icon-button aria-label="Clear" (click)="this.flutterState?.setText('')">
+                <mat-icon>close</mat-icon>
+              </button>
+            }
+          </mat-form-field>    
+        }
       </section>
     </mat-nav-list>
   </mat-sidenav>
 
   <mat-sidenav-content class="sidenav-content">
     <div class="flutter-app" #container>
-        <ng-flutter
-          src="flutter/main.dart.js"
-          assetBase="/flutter/"
-          (appLoaded)="onFlutterAppLoaded($event)"></ng-flutter>
+      <ng-flutter
+        src="flutter/main.dart.js"
+        assetBase="/flutter/"
+        (appLoaded)="onFlutterAppLoaded($event)"></ng-flutter>
     </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

web_embedding/ng-flutter/src/index.html

@@ -6,7 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>

web_embedding/ng-flutter/src/main.ts

@@ -10,5 +10,5 @@ bootstrapApplication(AppComponent, {
   providers: [
     provideRouter(appRoutes),
     importProvidersFrom(BrowserAnimationsModule)
-]
-})
+  ]
+})